Iryx UIFeedback
IAlert
An inline message about the thing next to it. Neutral chrome with a coloured icon — the icon carries the severity, so a page of alerts does not turn into a wall of colour.
Draft saved
Variants
Four severities, each with its own default icon. warning and danger announce assertively to a screen reader; info and success announce politely, so they do not cut across what the reader is doing.
Scheduled
Payment received
Past due
Send failed
Description only
Skip title for a single line. The icon still sets the severity.
Dismissing
closable adds a close button. Bind v-model:open to control visibility; the close event fires alongside it when you need to persist the decision.
You can dismiss this one
Actions
The actions slot sits under the description, for the thing the alert is asking you to do.
Past due
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'danger' | 'info' | Severity, and the default icon |
title | string | — | Bold first line |
description | string | — | Body text |
icon | icon | false | variant's icon | Your own icon, or false for none |
closable | boolean | false | Shows the close button |
closeLabel | string | 'Close' | Accessible name for that button |
as | string | 'div' | Element to render |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, icon?, content?, title?, description?, actions?, close? } | — | Per-element class overrides |
v-model:open controls visibility, and close is emitted when the button is pressed.
For a message about the page as a whole rather than the thing beside it, reach for IBanner; for something transient, useToast().