Alert — Playground
appearance
shape
size
State
<kui-alert title="Session expiring" message="Your access token expires in 3 days." (closed)="onClosed()" />Alert events
- No events yet.
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | Semantic type. Same five values as the toast. neutral never shows the built-in icon; danger is announced assertively, every other value politely. |
| shape | 'soft' | 'outline' | 'solid' | undefined | undefined | Visual weight, using the button shape vocabulary. Falls back to defaults.alert.shape, then soft. |
| size | 'sm' | 'md' | undefined | undefined | Padding and gap density. Falls back to defaults.alert.size, then the root defaults.size (sm or md only), then md. |
| banner | boolean | false | Stretches the alert to the full width of its container and removes the corner radius. |
| title | string | undefined | undefined | Optional single-line heading. Ignored when [kuiAlertTitle] is projected. Set at least one of title, message or [kuiAlertMessage]. |
| message | string | undefined | undefined | Optional supporting text below the title. Ignored when [kuiAlertMessage] is projected. |
| showIcon | boolean | undefined | undefined | Shows the built-in appearance icon (defaults.alert.showIcon, then true). neutral never shows one. Ignored when [kuiAlertIcon] is projected, which always renders. |
| closable | boolean | undefined | undefined | Shows the close button and enables (closed). Falls back to defaults.alert.closable, then true. |
| closeLabel | string | undefined | undefined | Accessible label for the close button. Falls back to the alert.close message (Close notification). |
| actionLabel | string | undefined | undefined | Label for the inline ghost action button. Ignored when [kuiAlertActions] is projected. |
| (action) | void | - | Emits when the action button is clicked. Not emitted for a projected [kuiAlertActions]. |
| (closed) | void | - | Emits when the close button is clicked. The alert never removes itself; hide it with @if. |
| [kuiAlertTitle] | content slot | - | Replaces the plain title string with arbitrary markup. |
| [kuiAlertIcon] | content slot | - | Replaces the built-in severity icon. A projected icon always renders, even for neutral, and inherits --kui-alert-icon-color. |
| [kuiAlertMessage] | content slot | - | Replaces the plain message string with arbitrary markup (links, lists). The title still renders alongside it. |
| [kuiAlertActions] | content slot | - | Replaces the single ghost action button with custom controls. kuiButton inside it picks up the appearance-tinted ghost colour. |
| KuiAlertOptions | interface | - | Shape of defaults.alert: size, shape, showIcon, closable and closeIcon. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.