Soracom

Design System
  1. Home
  2. Design system
  3. Styles
  4. 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>