Overview

States

The 4x visual state colors are:

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

<div class="ds-tag --alert">Example</div>

Icon with warning state

<i class="ds-icon --icon-user --warning"></i>

Notice with info state

<div class="ds-notice--info">Example</div>