Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Tag

Tag

Options

Basic usage

div

html
Copy 
<div class="ds-tag">
  <span>Tag text</span>
</div>

span (inline)

To use a tag inline (within text content), apply ds-tag and options to a span element.

html
Copy 
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag"><span>consectetur</span></span
  >, <span class="ds-tag"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.
</div>

label and checkbox

All text should be contained within the span element

html
Copy 
<!-- Default style -->
<label class="ds-tag">
  <input type="checkbox" />
  <span>First item</span>
</label>
<label class="ds-tag">
  <input type="checkbox" />
  <span>Second item</span>
</label>
<!-- Outline style -->
<label class="ds-tag --outline">
  <input type="checkbox" />
  <span>First item</span>
</label>
<label class="ds-tag --outline">
  <input type="checkbox" />
  <span>Second item</span>
</label>

label and radio

html
Copy 
<!-- Default style -->
<label class="ds-tag">
  <input type="radio" name="radio-basic" checked="checked" />
  <span>First item</span>
</label>
<label class="ds-tag">
  <input type="radio" name="radio-basic" />
  <span>Second item</span>
</label>
<!-- Outline style -->
<label class="ds-tag --outline">
  <input type="radio" name="radio-basic-outline" checked="checked" />
  <span>First item</span>
</label>
<label class="ds-tag --outline">
  <input type="radio" name="radio-basic-outline" />
  <span>Second item</span>
</label>

Indeterminate state

html
Copy 
<!-- Default style -->
<label class="ds-tag">
  <input type="radio" name="radio-basic" />
  <span>First item</span>
</label>
<label class="ds-tag">
  <input type="radio" name="radio-basic" />
  <span>Second item</span>
</label>
<!-- Outline style -->
<label class="ds-tag --outline">
  <input type="radio" name="radio-basic-outline" />
  <span>First item</span>
</label>
<label class="ds-tag --outline">
  <input type="radio" name="radio-basic-outline" />
  <span>Second item</span>
</label>

Styles

Default

html
Copy 
<!-- Div -->
<div class="ds-tag">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag"><span>consectetur</span></span
  >, <span class="ds-tag">elit</span> Nulla vitae elit libero, a pharetra augue.
</div>

Outline

html
Copy 
<!-- Div -->
<div class="ds-tag --outline">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --outline"><span>consectetur</span></span
  >, <span class="ds-tag --outline"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.
</div>

Pinned

Pinned tags will be affixed to the top left of the container

html
Copy 
<div class="ds-card">
  <p class="ds-tag --pinned">Pinned tag</p>
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
html
Copy 
<div class="ds-notice">
  <p class="ds-tag --pinned">Pinned tag</p>
  <div class="ds-text">Text content</div>
</div>

Fee

html
Copy 
<!-- Div -->
<div class="ds-tag --fee">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --fee"><span>consectetur</span></span
  >, <span class="ds-tag --fee"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.
</div>

Visual states

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

Default style

html
Copy 
<div class="ds-tag --alert">
  <span>Alert</span>
</div>
<div class="ds-tag --warning">
  <span>Warning</span>
</div>
<div class="ds-tag --success">
  <span>Success</span>
</div>
<div class="ds-tag --info">
  <span>Info</span>
</div>

Outline style

html
Copy 
<div class="ds-tag --outline --alert">
  <span>Alert</span>
</div>
<div class="ds-tag --outline --warning">
  <span>Warning</span>
</div>
<div class="ds-tag --outline --success">
  <span>Success</span>
</div>
<div class="ds-tag --outline --info">
  <span>Info</span>
</div>

Component color

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

Default style

html
Copy 
<div class="ds-tag --color-celeste">
  <span>Celeste</span>
</div>
<div class="ds-tag --color-celeste-light">
  <span>Celeste-light</span>
</div>
<div class="ds-tag --color-magenta">
  <span>Magenta</span>
</div>
<div class="ds-tag --color-ink-dark">
  <span>Ink-dark</span>
</div>

Outline style

html
Copy 
<div class="ds-tag --outline --color-celeste">
  <span>Celeste</span>
</div>
<div class="ds-tag --outline --color-celeste-light">
  <span>Celeste-light</span>
</div>
<div class="ds-tag --outline --color-magenta">
  <span>Magenta</span>
</div>
<div class="ds-tag --outline --color-ink-dark">
  <span>Ink-dark</span>
</div>

Icons

Add an additional class such as --icon-user from the available icon modifier list. Alternatively you can use an inline icon.

html
Copy 
<!-- Div -->
<div class="ds-tag --icon-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --icon-stats">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --icon-user"><span>consectetur</span></span
  >, <span class="ds-tag --icon-user"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.
</div>
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --icon-stats"><span>consectetur</span></span
  >, <span class="ds-tag --icon-calendar-create"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.
</div>
html
Copy 
<!-- Div -->
<div class="ds-tag --outline --icon-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --outline --icon-stats">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --outline --icon-user"><span>consectetur</span></span
  >, <span class="ds-tag --outline --icon-user"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.
</div>
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --outline --icon-stats"><span>consectetur</span></span
  >, <span class="ds-tag --outline --icon-calendar-create"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.
</div>

Inline icons

Alternatively ds-icon can be used inside ds-tag if necessary. This can be used when more than one icon is required, or if more control over the icon is required.

html
Copy 
<div class="ds-tag">
  <i class="ds-icon --icon-user"></i>
  <span>Tag text</span>
</div>
<div class="ds-tag">
  <i class="ds-icon --icon-stats"></i>
  <span>Tag text</span>
</div>
<div class="ds-tag">
  <i class="ds-icon --icon-calendar-create"></i>
  <span>Tag text</span>
</div>
<div class="ds-tag">
  <span>Tag text</span>
  <i class="ds-icon --icon-user"></i>
</div>
<div class="ds-tag">
  <span>Tag text</span>
  <i class="ds-icon --icon-stats"></i>
</div>
<div class="ds-tag">
  <span>Tag text</span>
  <i class="ds-icon --icon-calendar-create"></i>
</div>
html
Copy 
<div class="ds-tag --outline">
  <i class="ds-icon --icon-user"></i>
  <span>Tag text</span>
</div>
<div class="ds-tag --outline">
  <i class="ds-icon --icon-stats"></i>
  <span>Tag text</span>
</div>
<div class="ds-tag --outline">
  <i class="ds-icon --icon-calendar-create"></i>
  <span>Tag text</span>
</div>
<div class="ds-tag --outline">
  <span>Tag text</span>
  <i class="ds-icon --icon-user"></i>
</div>
<div class="ds-tag --outline">
  <span>Tag text</span>
  <i class="ds-icon --icon-stats"></i>
</div>
<div class="ds-tag --outline">
  <span>Tag text</span>
  <i class="ds-icon --icon-calendar-create"></i>
</div>

Inline icon with color

html
Copy 
<div class="ds-tag --color-yellow">
  <i class="ds-icon --icon-user --color-magenta"></i>
  <span>Tag text</span>
</div>

Size

Xsmall

html
Copy 
<div class="ds-tag --xsmall">
  <span>Tag text</span>
</div>
<div class="ds-tag --xsmall --outline --icon-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --xsmall --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>

Small

html
Copy 
<div class="ds-tag --small">
  <span>Tag text</span>
</div>
<div class="ds-tag --small --outline --icon-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --small --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>

Default

html
Copy 
<div class="ds-tag">
  <span>Tag text</span>
</div>
<div class="ds-tag --outline --icon-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>

Medium

html
Copy 
<div class="ds-tag --medium">
  <span>Tag text</span>
</div>
<div class="ds-tag --medium --outline --icon-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --medium --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>

Large

html
Copy 
<div class="ds-tag --large">
  <span>Tag text</span>
</div>
<div class="ds-tag --large --outline --icon-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --large --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>

Disabled state

When using label elements with checkbox/radio inputs, set the disabled attribute on the input.

When using div/span elements, use the class --disabled.

Default style

html
Copy 
<div class="ds-tag --color-celeste">
  <span>Celeste</span>
</div>
<div class="ds-tag --disabled">
  <span>Div</span>
</div>
<div class="ds-tag --color-celeste-light">
  <span>Celeste-light</span>
</div>
<div class="ds-tag --color-magenta">
  <span>Magenta</span>
</div>
<div class="ds-tag --color-ink-dark">
  <span>Ink-dark</span>
</div>
<!-- className: --disabled -->
<div class="ds-tag --disabled">
  <span>Div</span>
</div>
<!-- Attribute: disabled="disabled" -->
<label class="ds-tag">
  <input type="checkbox" disabled="disabled" />
  <span>Checkbox</span>
</label>
<label class="ds-tag">
  <input type="radio" name="radio-basic" disabled="disabled" />
  <span>Radio</span>
</label>
<!-- Attribute: disabled="disabled" and checked="checked" -->
<label class="ds-tag">
  <input type="checkbox" checked="checked" disabled="disabled" />
  <span>Checkbox</span>
</label>
<label class="ds-tag">
  <input type="radio" name="radio-basic" checked="checked" disabled="disabled" />
  <span>Radio</span>
</label>

Outline style

html
Copy 
<div class="ds-tag --color-celeste">
  <span>Celeste</span>
</div>
<div class="ds-tag --disabled">
  <span>Div</span>
</div>
<div class="ds-tag --color-celeste-light">
  <span>Celeste-light</span>
</div>
<div class="ds-tag --color-magenta">
  <span>Magenta</span>
</div>
<div class="ds-tag --color-ink-dark">
  <span>Ink-dark</span>
</div>
<!-- className: --disabled -->
<div class="ds-tag --outline --disabled">
  <span>Div</span>
</div>
<!-- Attribute: disabled="disabled" -->
<label class="ds-tag --outline">
  <input type="checkbox" disabled="disabled" />
  <span>Checkbox</span>
</label>
<label class="ds-tag --outline">
  <input type="radio" name="radio-basic" disabled="disabled" />
  <span>Radio</span>
</label>
<!-- Attribute: disabled="disabled" and checked="checked" -->
<label class="ds-tag --outline">
  <input type="checkbox" checked="checked" disabled="disabled" />
  <span>Checkbox</span>
</label>
<label class="ds-tag --outline">
  <input type="radio" name="radio-basic" checked="checked" disabled="disabled" />
  <span>Radio</span>
</label>

Strong content

If a tag contains a strong element, it will be styled differently.

Default style

html
Copy 
<!-- Div -->
<div class="ds-tag">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>
<!-- Label/checkbox -->
<label class="ds-tag">
  <input type="checkbox" />
  <span><strong>Info</strong>Tag text</span>
</label>

Outline style

html
Copy 
<!-- Div -->
<div class="ds-tag --outline">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --outline"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag --outline"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>
<!-- Label/checkbox -->
<label class="ds-tag --outline">
  <input type="checkbox" />
  <span><strong>Info</strong>Tag text</span>
</label>

No case

This option will prevent displaying the text content as all upper-case.

It’s generally recommended to use this option only if essential. In addition it’s recommended when using this option, that the text in the strong element is entered in upper-case if possible.

html
Copy 
<div class="ds-tag --no-case">
  <span><strong>INFO</strong>Tag text</span>
</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

html
Copy 
<div class="ds-tag --pulse">
  <span>Pulse</span>
</div>
<div class="ds-tag --success --pulse">
  <span>Pulse</span>
</div>
<div class="ds-tag --outline --pulse">
  <span>Pulse</span>
</div>
<div class="ds-tag --outline --success --pulse">
  <span>Pulse</span>
</div>

--glow

html
Copy 
<div class="ds-tag --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --success --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --outline --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --outline --success --glow">
  <span>Glow</span>
</div>

--blink

html
Copy 
<div class="ds-tag --blink">
  <span>Blink</span>
</div>
<div class="ds-tag --success --blink">
  <span>Blink</span>
</div>
<div class="ds-tag --outline --blink">
  <span>Blink</span>
</div>
<div class="ds-tag --outline --success --blink">
  <span>Blink</span>
</div>

Buttons

html
Copy 
<div class="ds-tag">
  <span>Item</span>
  <button class="ds-button --plain --icon-cancel --small --hide-label">
    <span>Remove</span>
  </button>
</div>

Examples

Styled content

html
Copy 
<!-- Default style div -->
<div class="ds-tag">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>
<!-- Outline style div -->
<div class="ds-tag --outline">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --outline"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag --outline"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

Styled content with icons

html
Copy 
<!-- Default style div -->
<div class="ds-tag --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --icon-user"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag --icon-user"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

<!-- Outline style div -->
<div class="ds-tag --outline --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --outline --icon-user"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag --outline --icon-user"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

Styled content with icons and visual state

html
Copy 
<!-- Default style div -->
<div class="ds-tag --alert --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --alert --icon-user"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag --alert --icon-user"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

<!-- Outline style div -->
<div class="ds-tag --outline --alert --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --outline --alert --icon-user"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag --outline --alert --icon-user"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

Styled content with icons and component colors

html
Copy 
<!-- Default style div -->
<div class="ds-tag --color-celeste-light --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --color-celeste-light --icon-user"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag --color-celeste-light --icon-user"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

<!-- Outline style div -->
<div class="ds-tag --outline --color-celeste --icon-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <span class="ds-tag --outline --color-celeste --icon-user"
    ><span><strong>Info</strong>consectetur</span></span
  >,
  <span class="ds-tag --outline --color-celeste --icon-user"
    ><span><strong>Info</strong>elit</span></span
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

Styled content with checkboxes

html
Copy 
<!-- Default style label -->
<label class="ds-tag">
  <input type="checkbox" />
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Default style label (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <label class="ds-tag"
    ><input type="checkbox" /><span><strong>Info</strong>Tag text</span></label
  >,
  <label class="ds-tag"
    ><input type="checkbox" /><span><strong>Info</strong>Tag text</span></label
  >
  Nulla vitae elit libero, a pharetra augue.
</div>
<!-- Outline style label -->
<label class="ds-tag --outline">
  <input type="checkbox" />
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Outline style label (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <label class="ds-tag --outline"
    ><input type="checkbox" /><span><strong>Info</strong>Tag text</span></label
  >,
  <label class="ds-tag --outline"
    ><input type="checkbox" /><span><strong>Info</strong>Tag text</span></label
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

Styled content with checkboxes and icons

html
Copy 
<!-- Default style label -->
<label class="ds-tag --icon-calendar">
  <input type="checkbox" />
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Default style label (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <label class="ds-tag --icon-calendar"
    ><input type="checkbox" /><span><strong>Info</strong>Tag text</span></label
  >,
  <label class="ds-tag"
    ><input type="checkbox" /><span><strong>Info</strong>Tag text</span></label
  >
  Nulla vitae elit libero, a pharetra augue.
</div>
<!-- Outline style label -->
<label class="ds-tag --outline --icon-calendar">
  <input type="checkbox" />
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Outline style label (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <label class="ds-tag --outline --icon-calendar"
    ><input type="checkbox" /><span><strong>Info</strong>Tag text</span></label
  >,
  <label class="ds-tag --outline --icon-calendar"
    ><input type="checkbox" /><span><strong>Info</strong>Tag text</span></label
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

Styled content with radio

html
Copy 
<!-- Default style label -->
<label class="ds-tag">
  <input type="radio" name="example-radio-1" checked="checked" />
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Default style label (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <label class="ds-tag"
    ><input type="radio" name="example-radio-1" /><span><strong>Info</strong>Tag text</span></label
  >,
  <label class="ds-tag"
    ><input type="radio" name="example-radio-1" /><span><strong>Info</strong>Tag text</span></label
  >
  Nulla vitae elit libero, a pharetra augue.
</div>
<!-- Outline style label -->
<label class="ds-tag --outline">
  <input type="radio" name="example-radio-1" />
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Outline style label (inline) -->
<div class="ds-text">
  Lorem ipsum dolor sit amet,
  <label class="ds-tag --outline"
    ><input type="radio" name="example-radio-1" /><span><strong>Info</strong>Tag text</span></label
  >,
  <label class="ds-tag --outline"
    ><input type="radio" name="example-radio-1" /><span><strong>Info</strong>Tag text</span></label
  >
  Nulla vitae elit libero, a pharetra augue.
</div>

Checkbox large outline style

This combination mirrors the previously available ds-checkbox--tags. Additional features and options are shown above.

html
Copy 
<label class="ds-tag --large --outline --no-case">
  <input type="checkbox" />
  <span>Tag text</span>
</label>
<label class="ds-tag --large --outline --no-case">
  <input type="checkbox" />
  <span>Tag text</span>
</label>

Radio large outline style

html
Copy 
<label class="ds-tag --large --outline --no-case">
  <input type="radio" name="example-radio-2" checked="checked" />
  <span>Tag text</span>
</label>
<label class="ds-tag --large --outline --no-case">
  <input type="radio" name="example-radio-2" />
  <span>Tag text</span>
</label>

Checkbox medium outline style

html
Copy 
<label class="ds-tag --medium --outline --no-case">
  <input type="checkbox" />
  <span>Tag text</span>
</label>
<label class="ds-tag --medium --outline --no-case">
  <input type="checkbox" />
  <span>Tag text</span>
</label>

Radio medium outline style

html
Copy 
<label class="ds-tag --medium --outline --no-case">
  <input type="radio" name="example-radio-3" checked="checked" />
  <span>Tag text</span>
</label>
<label class="ds-tag --medium --outline --no-case">
  <input type="radio" name="example-radio-3" />
  <span>Tag text</span>
</label>

Inside headings

html
Copy 
<h1>
  空色 Sky blue <span class="ds-tag"><span>Tag text</span></span>
</h1>
<h2>
  空色 Sky blue <span class="ds-tag"><span>Tag text</span></span>
</h2>
<h3>
  空色 Sky blue <span class="ds-tag"><span>Tag text</span></span>
</h3>

Visual states with icons

Default style

html
Copy 
<div class="ds-tag --alert --icon-calendar">
  <span>Alert</span>
</div>
<div class="ds-tag --outline --alert --icon-calendar">
  <span>Alert</span>
</div>

Long tags with ellipsis overflow

This example shows how long tags will be truncated with an ellipsis when they exceed the width of their container. The ds-tag class does not have a fixed width, so it will expand to fit its content unless constrained by a parent element.

html
Copy 
<div class="" style="width: 300px; padding: 20px; outline: 1px dotted red;">
  <div class="ds-tag">
    <span>A normal length tag</span>
  </div>
  <div class="ds-tag">
    <span>A very long tag: Lorem ipsum dolor sit amet. Nulla vitae elit libero, a pharetra augue.</span>
  </div>
  <div class="ds-tag">
    <span><strong>Short</strong>A normal length tag</span>
  </div>
  <div class="ds-tag">
    <span><strong>Long</strong>A very long tag: Lorem ipsum dolor sit amet. Nulla vitae elit libero, a pharetra augue.</span>
  </div>
</div>