Skip to content
MENU

Soracom

Design System

Visual states

Visual states are supported across a variety of components and provide a consistent way to indicate an elements status.

Overview 

Supported components 

The following SDS components support the 4x visual states - Alert, Warning, Success, Info:

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
<div class="ds-tag--alert">Example</div>
Example
<div class="ds-tag--alert">Example</div>
Icon with warning state
<i class="ds-icon--icon-basic-user ds-icon--warning"></i>
<i class="ds-icon--icon-basic-user ds-icon--warning"></i>
Notice with info state
<div class="ds-notice--info">Example</div>
Example
<div class="ds-notice--info">Example</div>