A coloured message block with an optional icon and border, in three sizes. Put the message in the default slot.
Examples
Colours
Five colours: red, amber, green, blue and gray, each with an icon and border.
Saved successfully.
Your trial ends soon.
Something went wrong.
A neutral note.
Just so you know.
<div class="flex flex-col gap-3">
<UiAlert color="green" icon="mdi:check-circle-outline" bordered>Saved successfully.</UiAlert>
<UiAlert color="amber" icon="mdi:alert-outline" bordered>Your trial ends soon.</UiAlert>
<UiAlert color="red" icon="mdi:close-circle-outline" bordered>Something went wrong.</UiAlert>
<UiAlert color="blue" icon="mdi:information-outline" bordered>A neutral note.</UiAlert>
<UiAlert color="gray" icon="mdi:information-outline" bordered>Just so you know.</UiAlert>
</div>Sizes and structured content
Three sizes (xs, sm, md); the default slot accepts multi-line, structured content.
This action cannot be undone
Deleting the project removes every file it contains.
Compact xs alert
<div class="flex flex-col gap-3">
<UiAlert color="amber" icon="mdi:alert-outline" bordered size="md">
<p class="font-semibold">This action cannot be undone</p>
<p>Deleting the project removes every file it contains.</p>
</UiAlert>
<UiAlert color="red" size="xs">Compact xs alert</UiAlert>
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | 'red' | Semantic colour. redambergreenbluegray |
| icon | string | '' | Leading MDI icon. |
| bordered | boolean | false | Add a border. |
| size | string | 'sm' | Padding and text size. xssmmd |
Slots
| Slot | Description |
|---|---|
default | Alert content. |
icon | Custom icon element (replaces the icon prop). |