Alert
stable 1.3 kB<hk-alert>An inline banner in four tones. Dismissal actually removes it, and the tone is carried by an icon as well as colour.
#banner#message
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| tone | 'info' | 'success' | 'warning' | 'danger' | 'info' | Sets the skin and the icon. |
| title | string | '' | Bold first line. |
| dismissible | boolean | false | Shows the close button. |
| icon | string | null | null | Overrides the tone icon. |
Outputs
dismissedEventEmitter<void>Emits when closed.
Keyboard
- Tab Reaches the dismiss button
- Enter / Space Dismisses
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-alert-info-bg | #f0f9ff | Info fill. |
| --hk-alert-danger-bg | #fef2f2 | Danger fill. |
| --hk-alert-radius | 12px | Corner radius. |
Accessibility
- Uses role="alert" for danger and warning so they interrupt, and role="status" for info and success so they do not.
- Every tone pairs a distinct icon with its colour, so the meaning survives colour blindness.