Alert
Capture user attention with important messages
Source ↗️ Report Issue ↗️Provide feedback, warnings, or other significant information that requires user attention. Use alert elements for notifications, success messages, warnings, or alerts.
Note
You can create different alert elements with various themes.
Default Alert
Alerts can be created without any theme or title.
Default alert without title.
Default alert with title.
Themes
The Alert
component comes with the following four different themes:
Info
Alert’s theme set to
info
.
Success
Alert’s theme set to
success
.
Warning
Alert’s theme set to
warning
.
Alert
Alert’s theme set to
alert
. Custom Icons
You can also pass custom icons to your Alert
components in the following way:
Be sure to checkout our GitHub repository.
Be sure to checkout our GitHub repository.
For Astro and Svelte components, pass a children with a slot
named icon
. For the React component, pass your icon to the icon
prop.
API
Prop | Purpose |
---|---|
element | Set the HTML tag used for the alert. Default to section . Use Element in React. |
title | Specifies the title for the alert. |
titleTag | Specifies the HTML tag of the title. Default to strong . Use TitleTag in React. |
titleProps | Pass additional attributes to the title tag of the alert. |
bodyProps | Pass additional attributes to the body tag of the alert. |
className | Pass additional CSS classes for the wrapper element. |
theme | Set the theme of your alert. Can be one of info , success , warning , alert . |
React prop | Purpose |
---|---|
icon | Pass your Icon component to use a custom icon with the alert. |
Request improvement for this page