EmptyState

Placeholder when no data is available.

Examples

Default

No results

Try a different filter, or clear the search.

import { Button, EmptyState, Icon } from '@var-ui/react';

<EmptyState
  icon={<Icon name="search" size="lg" />}
  title="No results"
  description="Try a different filter, or clear the search."
  action={<Button tone="accent" appearance="filled">Clear filters</Button>}
/>

Props

Accessibility

Built on React Aria Components where applicable.

Props

Prop	Type	Default	Description
`title`	`string`	—	Primary headline.
`action`	`ReactNode`	—	Call-to-action slot (typically a button or link).
`className`	`string \| undefined`	—	Additional CSS class names merged onto the root element.
`description`	`ReactNode`	—	Supporting copy below the title.
`icon`	`ReactNode`	—	Decorative glyph or illustration; consumers pass `<Icon>` or a custom node.

Theme this component via createDesignTheme({ components: { emptyState: … } }). See Customize for the full override API.

Public classes and data attributes from @var-ui/core emptyState().

root

Name	Example	Description
`class`	`var-ui-empty-state`	Root / part class name

icon

Name	Example	Description
`class`	`var-ui-empty-state__icon`	Root / part class name

title

Name	Example	Description
`class`	`var-ui-empty-state__title`	Root / part class name

description

Name	Example	Description
`class`	`var-ui-empty-state__description`	Root / part class name

action

Name	Example	Description
`class`	`var-ui-empty-state__action`	Root / part class name

Apply via `recipeProps(recipe(…))` or copy the class / data attributes onto your markup.