Tag
Options
Basic usage
div
<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.
<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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
<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>
<div class="ds-notice">
<p class="ds-tag --pinned">Pinned tag</p>
<div class="ds-text">Text content</div>
</div>
Fee
<!-- 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
<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
<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
<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
<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.
<!-- 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>
<!-- 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.
<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>
<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
<div class="ds-tag --color-yellow">
<i class="ds-icon --icon-user --color-magenta"></i>
<span>Tag text</span>
</div>
Size
Xsmall
<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
<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
<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
<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
<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
<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
<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
<!-- 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
<!-- 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.
<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
<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
<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
<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
<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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
<!-- 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.
<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
<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
<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
<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
<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
<div class="ds-tag --alert --icon-calendar">
<span>Alert</span>
</div>
<div class="ds-tag --outline --alert --icon-calendar">
<span>Alert</span>
</div>