Skip to content
MENU

Soracom

Design System

Tag

Options 

Basic usage 

There are 2x basic tag styles, ds-tag, ds-tag--outline.

<div class="ds-tag">Tag text</div>
<div class="ds-tag--outline">Tag text</div>
Tag text
Tag text
<div class="ds-tag">Tag text</div>
<div class="ds-tag--outline">Tag text</div>
Example of ds-tag used inline
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag">consectetur</span>, <span class="ds-tag">elit</span> Nulla vitae elit libero, a pharetra augue.</div>
Lorem ipsum dolor sit amet, consectetur, elit Nulla vitae elit libero, a pharetra augue.
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag">consectetur</span>, <span class="ds-tag">elit</span> Nulla vitae elit libero, a pharetra augue.</div>

Icons 

Add an additional class such as ds-tag--icon-online-solid from the available icon modifier list.

<div class="ds-tag--icon-online-solid">Tag text</div>
Tag text
<div class="ds-tag--icon-online-solid">Tag text</div>

Visual states 

Both tag styles (default and outline) adhere to 4x preset visual states - alert, warning, success and info.

Default tag
  <div class="ds-tag--alert">Alert</div>
  <div class="ds-tag--warning">Warning</div>
  <div class="ds-tag--success">Success</div>
  <div class="ds-tag--info">Info</div>
Alert
Warning
Success
Info
  <div class="ds-tag--alert">Alert</div>
  <div class="ds-tag--warning">Warning</div>
  <div class="ds-tag--success">Success</div>
  <div class="ds-tag--info">Info</div>
Default tag with icon
  <div class="ds-tag--icon-basic-user ds-tag--alert">Alert</div>
  <div class="ds-tag--icon-basic-user ds-tag--warning">Warning</div>
  <div class="ds-tag--icon-basic-user ds-tag--success">Success</div>
  <div class="ds-tag--icon-basic-user ds-tag--info">Info</div>
Alert
Warning
Success
Info
  <div class="ds-tag--icon-basic-user ds-tag--alert">Alert</div>
  <div class="ds-tag--icon-basic-user ds-tag--warning">Warning</div>
  <div class="ds-tag--icon-basic-user ds-tag--success">Success</div>
  <div class="ds-tag--icon-basic-user ds-tag--info">Info</div>
Outline style tag
  <div class="ds-tag--outline ds-tag--alert">Alert</div>
  <div class="ds-tag--outline ds-tag--warning">Warning</div>
  <div class="ds-tag--outline ds-tag--success">Success</div>
  <div class="ds-tag--outline ds-tag--info">Info</div>
Alert
Warning
Success
Info
  <div class="ds-tag--outline ds-tag--alert">Alert</div>
  <div class="ds-tag--outline ds-tag--warning">Warning</div>
  <div class="ds-tag--outline ds-tag--success">Success</div>
  <div class="ds-tag--outline ds-tag--info">Info</div>
Outline style tag with icon
  <div class="ds-tag--outline ds-tag--icon-basic-user ds-tag--alert">Alert</div>
  <div class="ds-tag--outline ds-tag--icon-basic-user ds-tag--warning">Warning</div>
  <div class="ds-tag--outline ds-tag--icon-basic-user ds-tag--success">Success</div>
  <div class="ds-tag--outline ds-tag--icon-basic-user ds-tag--info">Info</div>
Alert
Warning
Success
Info
  <div class="ds-tag--outline ds-tag--icon-basic-user ds-tag--alert">Alert</div>
  <div class="ds-tag--outline ds-tag--icon-basic-user ds-tag--warning">Warning</div>
  <div class="ds-tag--outline ds-tag--icon-basic-user ds-tag--success">Success</div>
  <div class="ds-tag--outline ds-tag--icon-basic-user ds-tag--info">Info</div>

Component color 

Both tag styles (default and outline) support component color classes.

Default style
  <div class="ds-tag--icon-basic-user ds-tag--color-celeste">Celeste</div>
  <div class="ds-tag--color-celeste-light">Celeste-light</div>
  <div class="ds-tag--color-magenta">Magenta</div>
  <div class="ds-tag--color-ink-dark">Ink-dark</div>
Celeste
Celeste-light
Magenta
Ink-dark
  <div class="ds-tag--icon-basic-user ds-tag--color-celeste">Celeste</div>
  <div class="ds-tag--color-celeste-light">Celeste-light</div>
  <div class="ds-tag--color-magenta">Magenta</div>
  <div class="ds-tag--color-ink-dark">Ink-dark</div>
Outline style
  <div class="ds-tag--icon-basic-user ds-tag--outline ds-tag--color-celeste">Celeste</div>
  <div class="ds-tag--outline ds-tag--color-celeste-light">Celeste-light</div>
  <div class="ds-tag--outline ds-tag--color-magenta">Magenta</div>
  <div class="ds-tag--outline ds-tag--color-ink-dark">Ink-dark</div>
Celeste
Celeste-light
Magenta
Ink-dark
  <div class="ds-tag--icon-basic-user ds-tag--outline ds-tag--color-celeste">Celeste</div>
  <div class="ds-tag--outline ds-tag--color-celeste-light">Celeste-light</div>
  <div class="ds-tag--outline ds-tag--color-magenta">Magenta</div>
  <div class="ds-tag--outline ds-tag--color-ink-dark">Ink-dark</div>

Animation 

Animation states for tags should only be used sparingly to indicate temporary states (such as sending/receiving data or waiting for a server side process to complete).

--pulse
<div class="ds-tag--pulse">Pulse</div>
<div class="ds-tag--success ds-tag--pulse">Pulse</div>
<div class="ds-tag--outline ds-tag--pulse">Pulse</div>
<div class="ds-tag--outline ds-tag--success ds-tag--pulse">Pulse</div>
Pulse
Pulse
Pulse
Pulse
<div class="ds-tag--pulse">Pulse</div>
<div class="ds-tag--success ds-tag--pulse">Pulse</div>
<div class="ds-tag--outline ds-tag--pulse">Pulse</div>
<div class="ds-tag--outline ds-tag--success ds-tag--pulse">Pulse</div>
--glow
<div class="ds-tag--glow">Glow</div>
<div class="ds-tag--success ds-tag--glow">Glow</div>
<div class="ds-tag--outline ds-tag--glow">Glow</div>
<div class="ds-tag--outline ds-tag--success ds-tag--glow">Glow</div>
Glow
Glow
Glow
Glow
<div class="ds-tag--glow">Glow</div>
<div class="ds-tag--success ds-tag--glow">Glow</div>
<div class="ds-tag--outline ds-tag--glow">Glow</div>
<div class="ds-tag--outline ds-tag--success ds-tag--glow">Glow</div>
--blink
<div class="ds-tag--blink">Blink</div>
<div class="ds-tag--success ds-tag--blink">Blink</div>
<div class="ds-tag--outline ds-tag--blink">Blink</div>
<div class="ds-tag--outline ds-tag--success ds-tag--blink">Blink</div>
<div class="ds-tag--blink">Blink</div>
<div class="ds-tag--success ds-tag--blink">Blink</div>
<div class="ds-tag--outline ds-tag--blink">Blink</div>
<div class="ds-tag--outline ds-tag--success ds-tag--blink">Blink</div>