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"><span>Pinned tag</span></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"><span>Pinned tag</span></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>

Flag

This style only applies to tags with multiple text child elements (spans/strong). The first item is always shown in the first column, as narrow as possible, and spans all rows. Subsequent items are shown in the second column, one per row.

To apply font-styling and sizing, use ds-text on each child span as necessary.

Currently this style only supports a subset of all ds-tag options (icons, visual states, component colors).

Basic usage

html
Copy 
<div class="ds-tag --flag">
  <span>First item</span>
  <span>Second item</span>
  <span>Third item</span>
</div>
<div class="ds-tag --flag --outline">
  <span>First item</span>
  <span>Second item</span>
  <span>Third item</span>
</div>

<div class="ds-tag --flag">
  <span>First item</span>
  <span>Second item</span>
  <span>Third item</span>
  <span>Fourth item</span>
  <span>Fifth item</span>
</div>
<div class="ds-tag --flag --outline">
  <span>First item</span>
  <span>Second item</span>
  <span>Third item</span>
<span>Fourth item</span>
  <span>Fifth item</span>
</div>

Basic usage with color

html
Copy 
<div class="ds-tag --flag --color-celeste">
  <span>First item</span>
  <span>Second item</span>
  <span>Third item</span>
</div>
<div class="ds-tag --flag --outline --color-celeste">
  <span>First item</span>
  <span>Second item</span>
  <span>Third item</span>
</div>

Basic usage with icon

html
Copy 
<div class="ds-tag --flag --icon-user">
  <span>First item</span>
  <span>Second item</span>
  <span>Third item</span>
</div>
<div class="ds-tag --flag --outline --icon-user">
  <span>First item</span>
  <span>Second item</span>
  <span>Third item</span>
</div>

Text formatting

html
Copy 
<div class="ds-tag --flag">
  <span class="ds-text --2xsmall-bold">First item</span>
  <span class="ds-text --small --no-case">Second item</span>
  <span class="ds-text --3xsmall --color-red-lightest">Third item</span>
</div>
<div class="ds-tag --flag --outline">
  <span class="ds-text --2xsmall-bold">First item</span>
  <span class="ds-text --small --no-case">Second item</span>
  <span class="ds-text --3xsmall --color-red-shade">Third item</span>
</div>

Text overflow

html
Copy 
<div class="ds-tag --flag">
  <span class="ds-text --2xsmall-bold">First item</span>
  <span class="ds-text --small --no-case --20-wmax">This is a very long title and should be truncated</span>
  <span class="ds-text --3xsmall --color-red-lightest">Third item</span>
</div>
<div class="ds-tag --flag --outline">
  <span class="ds-text --2xsmall-bold">First item</span>
  <span class="ds-text --small --no-case --20-wmax">This is a very long title and should be truncated</span>
  <span class="ds-text --3xsmall --color-red-shade">Third item</span>
</div>

Label wrapping

html
Copy 
<!-- The first item will always be as narrow as possible -->
<div class="ds-tag --flag">
  <span>First item which is longer</span>
  <span>Second item</span>
  <span>Third item</span>
</div>

<!-- Or use a &lt;wbr/&gt; tag to indicate a suitable break point -->

<div class="ds-tag --flag">
  <span>First item which<wbr/> is longer</span>
  <span>Second item</span>
  <span>Third item</span>
</div>

Combined example

html
Copy 
<div class="ds-tag --flag --icon-user --color-celeste-lightest">
  <span class="ds-text --2xsmall-bold">First item</span>
  <span class="ds-text --small --no-case --20-wmax">This is a very long title and should be truncated</span>
  <span class="ds-text --3xsmall --color-celeste-darker">Third item</span>
</div>
<div class="ds-tag --flag --outline --icon-user --color-celeste">
  <span class="ds-text --2xsmall-bold">First item</span>
  <span class="ds-text --small --no-case --color-ink-darker --20-wmax">This is a very long title and should be truncated</span>
  <span class="ds-text --3xsmall --color-celeste-dark">Third item</span>
</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>