Alerts are essential components for highlighting important information on web pages. They effectively capture user attention for notifications, warnings, or updates.
Basic
To create alert, simply use a combination of classes, adding the `.card`, `.card-content`, `.style-[type]-[variant]` classes to some element.
The data you requested is ready!
Types
The most commonly used alert styles, we provide `solid`, `outline`, `link`, `white` and `black`.
Solid alert. The data you requested is ready!
Outline alert. The data you requested is ready!
Soft alert. The data you requested is ready!
White alert. The data you requested is ready!
Black alert. The data you requested is ready!
Solid alerts
To create solid alerts, simply use the `.style-solid-[variant]` class.
Solid primary alert. The data you requested is ready!
Solid secondary alert. The data you requested is ready!
Solid success alert. The data you requested is ready!
Solid warn alert. The data you requested is ready!
Solid error alert. The data you requested is ready!
Outline alerts
To create outline alerts, simply use the `.style-outline-[variant]` class.
Outline primary alert. The data you requested is ready!
Outline secondary alert. The data you requested is ready!
Outline success alert. The data you requested is ready!
Outline warn alert. The data you requested is ready!
Outline error alert. The data you requested is ready!
Soft alerts
To create soft alerts, simply use the `.style-soft-[variant]` class.
Soft primary alert. The data you requested is ready!
Soft secondary alert. The data you requested is ready!
Soft success alert. The data you requested is ready!
Soft warn alert. The data you requested is ready!
Soft error alert. The data you requested is ready!
White/Black alerts
To create white or black alerts, simply use the `.style-white` or `.style-black` class.
White alert. The data you requested is ready!
Black alert. The data you requested is ready!
Icons
You can add icons from any library. In the example below we used Bootstrap Icons .
Perfect UI is a lightweight and customizable library!
Some features maybe is not available.
The data you requested is ready!
Cannot connect to the database.
A problem has been occurred while submitting your data.
With description
Alerts can also contain additional HTML elements like headings, paragraphs and icons.
Cannot connect to the database.
We are unable to save any progress at this time.
With list
Similarly you can use lists.
A problem has been occurred while submitting your data.
This username is already in use.
Email field can't be empty.
Please enter a valid phone number.
Actions
You can use alerts with action buttons.
YouTube would like you to send notifications
Notifications may include alerts, sounds and icon badges. These can be
configured in Settings.
Positions
You can position the alert using the `.float`, `.float-right` and `.float-top` classes.
