Alert
Use an alert to give users information about an important event.
Class names
- component:
alert - style:
alert-outline,alert-dash,alert-soft - color:
alert-info,alert-success,alert-warning,alert-error - direction:
alert-vertical,alert-horizontal
Syntax
<div role="alert" class="alert {MODIFIER}">{CONTENT}</div>
Rules
{MODIFIER}is optional. It can include one class name from each style, color, and direction category.- For responsive layouts, add
sm:alert-horizontal.