- Home
- Design system
- Styles
- Visual states
Visual states
Visual states are supported across a variety of components and provide a consistent way to indicate an elements status.
Overview
States
The 4x visual state colors are:
alert
warning
success
info
Visual states should only be used if the state makes sense (i.e. do not use the alert visual state to make something red if it is not actually an alert/error).
For components that support visual states, adding the required class suffix will display that component with the matching visual state (color).
Examples
Tag with alert state
html
Copy
<div class="ds-tag --alert">Example</div>
Icon with warning state
html
Copy
<i class="ds-icon --icon-user --warning"></i>
Notice with info state
html
Copy
<div class="ds-notice--info">Example</div>