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
Filled
border-radius-alert
background-color-*
|
|
padding-*
|
|
text-color-*
|
|
flex-gap-*
|
|
position-up-1
|
text-align-left
Filled Alpha
border-radius-alert
background-color-*
|
|
padding-*
|
|
text-color-*
|
|
flex-gap-*
|
|
position-up-1
|
text-align-left
Outlined
border-radius-alert
border-solid
border-color-*
|
|
padding-*
|
|
text-color-*
|
|
flex-gap-*
|
|
position-up-1
|
text-align-left