Empty state
stable 1 kB<hk-empty>Three empty states that genuinely differ — nothing yet, nothing matching, and something broke — because the right next action is different in each.
#zero#placeholder
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| icon | string | '' | Icon class shown above the title. |
| title | string | '' | Headline. |
| body | string | '' | Supporting sentence — say what to do next. |
| actionLabel | string | '' | Primary button label. Omit for no button. |
Outputs
actionEventEmitter<void>Emits when the button is pressed.
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-empty-icon | #94a3b8 | Icon colour. |
| --hk-empty-pad | 2.5rem 1rem | Block padding. |
Accessibility
- The title is a heading, so the state is reachable by heading navigation.
- The action is a button when it triggers work and a link when it navigates — not always a button.