Empty State

Empty states are used to communicate that a page, section, or data set has no content to display. They combine an illustration, a title, a subtext, and optional action buttons to guide users on what to do next — whether that’s creating their first item, adjusting filters, or trying again later.

Usage

Loading Code Block...

Full example

The default empty state displays a built-in illustration, a title, a descriptive subtitle, and action buttons via the integrated ButtonGroup.

No Data Available

There is no data available at the moment.

Learn MoreCreate New

Loading Code Block...

Sizes

Four sizes are available — sm, md, lg, and xl — which scale the illustration, typography, and action button sizes proportionally. The button size is automatically mapped to a smaller ButtonGroup size for visual balance.

EmptyState size	Illustration	Title style	Button size
sm	96 × 96	Small bold	xs
md	184 × 184	Medium bold	sm
lg	280 × 280	Header bold	md
xl	384 × 384	Header bold	lg

sm

No Data Available

There is no data available at the moment.

Learn MoreCreate New

Loading Code Block...

Custom image

The lets you replace the default illustration. Pass a URL string for a simple <img> tag, or pass a for full control over the graphic.

When image is omitted, a built-in SVG illustration is rendered automatically, scaled to the current size.

No Orders Yet

Your order history will appear here once you make a purchase.

Loading Code Block...

With action buttons

The buttonGroup prop accepts a ButtonGroupProps object to render action buttons below the subtext. The button size is automatically derived from the size prop — you do not need to set it manually.

No Transactions Found

There are no transactions matching your current filters.

Go BackClear Filters

Loading Code Block...

Without buttons

When the buttonGroup prop is omitted, only the illustration, title, and subtext are shown — useful for informational empty states where no user action is required.

All Caught Up!

You have no new notifications at the moment.

Loading Code Block...

---

EmptyState

ButtonGroup Props (for action buttons)

The buttonGroup prop accepts the following shape in both frameworks:

Props	Default	Type	Description
type	'default'	'default' | 'link' | 'stretch'	Layout type. 'default' right-aligns buttons, 'link' spaces them with a tertiary link on the left, 'stretch' makes buttons full-width.
layout	'horizontal'	'horizontal' | 'vertical'	Stacking direction of the buttons.
primaryButton	-	{ text: string; onClick?: () => void; [key: string]: any }	Required. The main call-to-action button. Rendered with the default button variant.
secondaryButton	-	{ text: string; onClick?: () => void; [key: string]: any }	Optional. A secondary action button rendered with the outline variant.
tertiaryButton	-	{ text: string; onClick?: () => void; [key: string]: any }	Optional. A tertiary link-style action. Only rendered when type is 'link'. Note: Vue's EmptyState forces type to 'default', so `tertiaryButton` is never rendered when passed via EmptyState's `buttonGroup` prop in Vue.

Accessibility

• The title is rendered as a heading element — if the empty state is used inside a page that already has a primary heading, consider wrapping it in a <section> with an appropriate aria-label to maintain heading hierarchy.
• When using a custom image, provide meaningful alt text if it conveys information. Decorative illustrations should use alt="" or role="presentation".
• Ensure action buttons have clear, descriptive labels — avoid generic text like “Click Here”.
• The default illustration is purely decorative and does not convey critical information.

Best practices

Contextual messaging

Tailor the title and description to the specific context. Instead of generic “No data”, use context-specific messages like “No transactions found” or “Your cart is empty” to help users understand the situation.

Sizing guidance

Use sm for inline or card-level empty states. Use md or lg for page-level or section-level placeholders where you want the illustration to be prominent.

Action guidance

Always provide at least one action button when users can resolve the empty state themselves — e.g. “Create new”, “Import data”, or “Adjust filters”.

Image sizing

When providing a custom image URL, be aware the image container uses w-32 h-32 with object-cover at all sizes. For larger illustrations, pass a instead so you can control dimensions directly.