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 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
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 |