Empty State

Display

A centered placeholder block for zero-data views with icon, title, description, and a CTA slot.

Props

Prop	Type	Default	Description
`title`*	`string`	—	Main heading text.
`description`	`string`	—	Supporting description.

Examples

Default

No results found

Try adjusting your filters or search term.

vue

<DsEmptyState
  title="No results found"
  description="Try adjusting your filters or search term."
>
  <template #icon>
    <!-- your icon here -->
  </template>
  <DsButton>Clear filters</DsButton>
</DsEmptyState>

No CTA

Nothing here yet

Start by creating your first component.

Skeleton

Use DsEmptyStateSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsEmptyStateSkeleton />

Accessibility

Icon slot accepts any SVG or image.
Default slot accepts CTA buttons.

CodeBlock

HoverCard