Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Blocks
  2. Composed Empty State
  3. API and Development

Composed Empty State

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
See props.ts for the props and schema.ts for the declaration (inputs, slots, composed components, variants).
PropTypeDefault
titleLocalizedMessagerequired
descriptionLocalizedMessage | DisplayValuenone
iconGlyphnone
illustrationReactNode (Icon or Image)none
primaryActionReactNode (Button)none
secondaryActionReactNode (Button or Link)none
sizeComposedEmptyStateSizePage
toneComposedEmptyStateToneNoData
announcebooleantrue for NoResults, else false
classNamestringnone
idstringnone
refRef<HTMLDivElement>none
ComposedEmptyStateSize: Inline, Panel, Page. ComposedEmptyStateTone: NoResults, NoData, Error, Permission. Import from @prepared911/ui/blocks/composed-empty-state.
Props
NameTypeDefaultDescription
titleLocalizedMessage—Heading copy of the empty region.
announceboolean—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.
classNamestring—Classes appended after the generated classes.
descriptionLocalizedMessage | DisplayValue—Supporting copy under the title. Copy or runtime data, such as a message the caller received.
iconGlyph—Glyph in EmptyState's icon well, between the illustration and the title. Decorative.
idstring—Id of the root element.
illustrationReactNode—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.
primaryActionReactNode—The action that recovers the region or creates its first record. Normally one Button.
refRef<HTMLDivElement>—Ref to the root element.
secondaryActionReactNode—A lesser path, such as documentation or configuration. A Button or a Link. Renders after primaryAction.
sizeComposedEmptyStateSize—How much of its region the block takes. Defaults to {@link ComposedEmptyStateSize.Page}.
toneComposedEmptyStateTone—Why the region is empty. Defaults to {@link ComposedEmptyStateTone.NoData}.
Storybook
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Previous
Composed Empty State / Usage
Next
Composed Empty State / Accessibility
On this page
Props
Storybook