Soracom

Overview 

Supported components 

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

• Banner
• Buttons
• Card
• Datatable
• Details
• Dialog
• Disclosure
• Group
• Heading
• Icon
• Input
• Notice
• Richtip
• Tag
• Text
• Texttip

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 

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

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

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

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

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

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