Components
Alert
Alerts are designed to notify users about important events, updates, or changes that require their attention.
Variants
Solid alerts
The standard format of solid-colored avatars, accompanied by the component class `alert` and modifier class <br /> `alert-{semantic-color}`.
Soft alerts
The standard format of soft-colored avatars, accompanied by the component class `alert` , `alert-soft` and modifier class `alert-{semantic-color}`.
Outline alerts
The standard format of outline-colored avatars, accompanied by the component class `alert` , `alert-outline` and modifier class `alert-{semantic-color}`.
Illustrations
Dashed alerts
You can achieve this style by combining the `border-dashed` utility class with the `alert-outline` modifier class.
Alerts with icon
Add a descriptive icon to complement the message within the alert component, as illustrated in the example below.
Warning alert: Stay informed about the latest updates and upcoming events.
Success alert: Explore our recent achievements and upcoming events.
Warning alert: Take note of important updates and upcoming events.
Success alert: Celebrate our successes and stay informed about upcoming events.
Warning alert: Pay attention to warnings and stay updated about upcoming events.
Success alert: Be aware of important notices and upcoming events.
Descriptive alert
Alerts may include supplementary HTML elements such as headers, paragraphs, and icons.
Server maintenance in progress
Our servers are currently undergoing maintenance. We apologize for any inconvenience caused and appreciate your patience.
Alert with list
Similarly you can use lists.
Please ensure that your password meets the following requirements:
- Contains a minimum of 10 characters and a maximum of 100 characters.
- Includes at least one lowercase character.
- Incorporates at least one special character such as !, @, #, or ?.
Alert with action
The action alert delivers vital information to users and encourages them to take defined actions. It commonly comprises a message, a link for additional details, and interactive buttons for user engagement.
Responsive alert
This alert example maintains a horizontal layout on larger screens while adapting to a vertical layout on mobile devices.
Server maintenance in progress
Our servers are currently undergoing maintenance. We apologize for any inconvenience caused and appreciate your patience.
Dismissible alert
Utilize the `data-remove-element` attribute to specify the connected ID for alert removal. Customize the removal animation by incorporating the `removing:` modifier, as illustrated below.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
alert | component | Container element |
alert-soft | style | Soft color alert with border |
alert-outline | style | Alert with border |
alert-primary | color | Alert with 'primary' color |
alert-secondary | color | Alert with 'secondary' color |
alert-info | color | Alert with 'info' color |
alert-success | color | Alert with 'success' color |
alert-warning | color | Alert with 'warning' color |
alert-error | color | Alert with 'error' color |