Usage
schema.ts.
ComposedEmptyStateTone.Error is only the visual for a failure the caller reports.| Size | Use | Padding | Copy column |
|---|---|---|---|
Inline | A row, a card body, a menu | none | no cap; takes only the height it needs |
Panel | A panel or section body | --space-24 block, --space-16 inline | --dialog-width-sm |
Page (default) | The body of a page | --space-48 block, --space-24 inline | --dialog-width-md |
Panel and Page fill the region (min-block-size: 100%) and center their content on both axes. The block sets no height of its own.
The tone is the caller's classification of why the region is empty. It sets one thing: whether the block is a live region.
| Tone | Use | Live region by default |
|---|---|---|
NoResults | A search or filter matched nothing | yes (role="status") |
NoData (default) | Nothing has been created or received yet | no |
Error | The data could not be shown | no |
Permission | The person may not see the data | no |
announce to override the default in either direction. The block never sets role="alert".
The block imports no glyph, so it picks no icon for a tone. Pass the icon the tone calls for (the stories use search, inbox, alert, and lock) and an illustration when the region has room for one.
icon is a glyph in EmptyState's neutral icon well. Decorative.illustration is an Icon or an Image above the icon well. The block hides it from assistive technology, so the title and description must carry the meaning. Size the Icon yourself.primaryAction recovers the region ("Clear filters") or creates the first record ("Create queue"). Normally one Button.secondaryAction is a lesser path, such as documentation or configuration. A Button or a Link. It renders after the primary action and wraps below it when the column is narrow.@prepared911/ui/blocks/composed-empty-state/styles.css and the stylesheets of the components it composes (Box, EmptyState, and the Icon, Image, Button, or Link you pass).