Alert
Alert banners are full width components used to display important messages or notifications to users.
This is a neutral alert
This is a info alert
This is a success alert
This is a warning alert
This is a danger alert
Props
| Name | Default | Type |
|---|---|---|
variant | neutral | neutral info success warning danger The visual style of the alert |
title | — | string Optional title for the alert. When provided, uses a different styling than slots |
filled | — | boolean When true, uses a stronger color variant with colored background |
filled-strong | — | boolean When true, uses a high visibility colored background |
description | — | string Optional description text for the alert |
icon-align | center | start center end Controls the vertical alignment of the alert icon |
hide-icon | false | boolean Hides the default icon completely. If hiding the icon, prefer using the filled variant to preserve color-coding |
Slots
| Name | Accepts | Description |
|---|---|---|
default | any | The main content of the alert |
icon | any | Custom icon that replaces the default variant icon |
end | any | Optional content rendered at the end of the alert |
Please note. Unless you're using the description prop, the Alert component does not style the default slot at all. If you are passing in simple text, please wrap it in a <p> for consistent typography.
Examples
Custom Title and Description
System Update
A new version of the system is available. Please update to the latest version to ensure optimal performance and security.
Components in Slots
Your session will expire in 5 minutes