Composed Empty State

API and Development

See props.ts for the props and schema.ts for the declaration (inputs, slots, composed components, variants).

Prop	Type	Default
`title`	`LocalizedMessage`	required
`description`	`LocalizedMessage \| DisplayValue`	none
`icon`	`Glyph`	none
`illustration`	`ReactNode` (`Icon` or `Image`)	none
`primaryAction`	`ReactNode` (`Button`)	none
`secondaryAction`	`ReactNode` (`Button` or `Link`)	none
`size`	`ComposedEmptyStateSize`	`Page`
`tone`	`ComposedEmptyStateTone`	`NoData`
`announce`	`boolean`	`true` for `NoResults`, else `false`
`className`	`string`	none
`id`	`string`	none
`ref`	`Ref<HTMLDivElement>`	none

ComposedEmptyStateSize: Inline, Panel, Page. ComposedEmptyStateTone: NoResults, NoData, Error, Permission.

Import from @prepared911/ui/blocks/composed-empty-state.

Props

Name	Type	Default	Description
`title`	`LocalizedMessage`	—	Heading copy of the empty region.
`announce`	`boolean`	—	Makes the block a polite live region (`role="status"`) so a screen reader announces it when it appears after a filter or search. Defaults to `true` for {@link ComposedEmptyStateTone.NoResults} and `false` otherwise.
`className`	`string`	—	@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
`description`	`LocalizedMessage \| DisplayValue`	—	Supporting copy under the title. Copy or runtime data, such as a message the caller received.
`icon`	`Glyph`	—	Glyph in EmptyState's icon well, between the illustration and the title. Decorative.
`id`	`string`	—	Id of the root element.
`illustration`	`ReactNode`	—	An illustration above the icon well: an `Icon` or an `Image`. Decorative, so the block hides it from assistive technology; the title and description carry the meaning.
`primaryAction`	`ReactNode`	—	The action that recovers the region or creates its first record. Normally one Button.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.
`secondaryAction`	`ReactNode`	—	A lesser path, such as documentation or configuration. A Button or a Link. Renders after `primaryAction`.
`size`	`ComposedEmptyStateSize`	—	How much of its region the block takes. Defaults to {@link ComposedEmptyStateSize.Page}.
`tone`	`ComposedEmptyStateTone`	—	Why the region is empty. Defaults to {@link ComposedEmptyStateTone.NoData}.

Storybook

Interactive examples and edge cases for this component are in Storybook.

On this page