Skip to content
MENU

Soracom

Design System

Label

Options 

Basic usage 

Using <label> element
<label for="test" class="ds-label">
  Label text
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label for="test" class="ds-label">
  Label text
</label>
Using <div> element
<div class="ds-label">
  Label text
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-label">
  Label text
</div>

No case 

Use the initial case of text
<label for="test" class="ds-label --no-case">
  Label text
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label for="test" class="ds-label --no-case">
  Label text
</label>

Label note 

Using <label> element
<label for="test" class="ds-label">
  Label text
  <span class="ds-label__note">Optional note</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label for="test" class="ds-label">
  Label text
  <span class="ds-label__note">Optional note</span>
</label>
Using <div> element
<div class="ds-label">
  Label text
  <span class="ds-label__note">Optional note</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-label">
  Label text
  <span class="ds-label__note">Optional note</span>
</div>

Visual states 

Using <label> element
<label for="test" class="ds-label --alert">
  Label text
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label for="test" class="ds-label --alert">
  Label text
</label>
Using <div> element
<div class="ds-label --alert">
  Label text
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-label --alert">
  Label text
</div>

Notification indicator 

A label can display a notification indicator (dot) by adding the class --notification.

<label for="test" class="ds-label --notification">
  Label text
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label for="test" class="ds-label --notification">
  Label text
</label>

Notification indicators adhere to 4x preset visual states - alert, warning, success and info.

<label for="test" class="ds-label --notification-success">
  Label text
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label for="test" class="ds-label --notification-success">
  Label text
</label>

Additionally, if the label has an attribute data-notification-counter set to a non-empty value, that value will be shown in the indicator. If the attribute is set to empty data-notification-counter="" the indicator dot will be hidden.

<label for="test" class="ds-label --notification" data-notification-counter="3">
  Label text
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label for="test" class="ds-label --notification" data-notification-counter="3">
  Label text
</label>