Alerts

Alert styles designed for clear, accessible communication of system states and user feedback.
Alerts are built using existing Library classes and elements, so their layout, spacing, colors, icons, and content can be adjusted as needed while keeping the underlying structure consistent.

The position-up-1 element is used to slightly raise the alert icon so it aligns more naturally with the first line of text, which usually begins with a capital letter. This is a visual alignment adjustment only and can be removed if the icon works better without it in a specific layout.

Basic

text-color-*
|
|
flex-gap-*
|
|
position-up-1
|
text-align-left
Primary
Add text here...
Alternate
Add text here...
Success
Add text here...
Info
Add text here...
Warning
Add text here...
Error
Add text here...

Filled

border-radius-alert
background-color-*
|
|
padding-*
|
|
text-color-*
|
|
flex-gap-*
|
|
position-up-1
|
text-align-left
Primary
Add text here...
Alternate
Add text here...
Success
Add text here...
Info
Add text here...
Warning
Add text here...
Error
Add text here...

Filled Alpha

border-radius-alert
background-color-*
|
|
padding-*
|
|
text-color-*
|
|
flex-gap-*
|
|
position-up-1
|
text-align-left
Primary
Add text here...
Alternate
Add text here...
Success
Add text here...
Info
Add text here...
Warning
Add text here...
Error
Add text here...

Outlined

border-radius-alert
border-solid
border-color-*
|
|
padding-*
|
|
text-color-*
|
|
flex-gap-*
|
|
position-up-1
|
text-align-left
Primary
Add text here...
Alternate
Add text here...
Success
Add text here...
Info
Add text here...
Warning
Add text here...
Error
Add text here...