Component catalog
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Show something purposeful instead of a blank screen when a list, search, or feed has nothing to render.
import { EmptyState } from "@liquidify/react/empty-state"| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Freeform slot the caller composes their own content into (SwiftUI `actions: () -> Actions`) — typically `<Button>`s, e.g. `variant="borderedProminent"` for the primary action. Rendered as a direct flex child so it respects the root's column alignment; EmptyState enforces no structure on it. |
| className | string | undefined | — | Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean. |
| description | ReactNode | — | Secondary explanatory copy (SwiftUI `description: () -> Text?`). A string/number renders through the component's own token-styled text element; a `ReactNode` passes through unwrapped. |
| icon | ReactNode | — | Decorative glyph, e.g. `<Icon name="bookmark" />` (SwiftUI `systemImage:` / `image:`). Always `aria-hidden` regardless of what the supplied node itself sets. |
| ref | Ref<HTMLElement> | undefined | — | Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`. |
| title required | string | — | The accessible name — required; rendered as the heading-level title. |
Empty State preserves the semantics of its content and should be given a clear accessible label when its visible content does not provide one.
| Name | Value |
|---|---|
| --lq-color-label-primary- | #000000#ffffff |
| --lq-color-label-secondary- | rgba(60, 60, 67, 0.6)rgba(235, 235, 245, 0.6)rgba(60, 60, 67, 0.8)rgba(235, 235, 245, 0.8) |
| --lq-color-label-secondary-dark | rgba(235, 235, 245, 0.6) |
| --lq-color-label-secondary-light | rgba(60, 60, 67, 0.6) |
| --lq-empty-state-gap | var(--lq-space-8) |
| --lq-empty-state-group-gap | var(--lq-space-24) |
| --lq-empty-state-icon-size | var(--lq-space-40) |
| --lq-empty-state-pad | var(--lq-space-24) |
| --lq-empty-state-track-h | Component-defined value |
| --lq-font-size-body | 0.8125rem |
| --lq-font-size-title2 | 1.0625rem |
| --lq-font-weight-bold | 700 |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-space- | 0.0625rem0.125rem0.25rem0.5rem0.75rem1rem1.25rem1.5rem2rem2.5rem3rem3.5rem |