Alert

The Alert component is designed to display important messages or notifications to users. It offers a straightforward and effective way to capture attention, emphasize key information, or convey the status of an action. With six available themes; default, .primary, .success, .warning, .error, and .dark. Alerts are highly customizable to suit various designs and themes. Simply add the .alert class to a span or div container element to create an alert.
This is my default alert. This is my closable default alert.
This is my primary alert.
This is my primary closable alert.
This is my success alert.
This is my warning alert.
This is my error alert.
This is my dark alert.
Outlined Style
This is my outlined primary alert.
This is my outlined closable success alert.
Utility : border-2
Sizes
Small Default Large
Styles Combinators
primary .primary.alert
success .success.alert
warning .warning.alert
error .error.alert
dark .dark.alert
outlined .outlined.alert
States Combinators
closable .closable.alert
Sizes Combinators
small .small.alert
large .large.alert