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><!-- 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>Visual states
Both tag styles (default and outline) adhere to 4x preset visual states - alert, warning, success and info.
<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><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.
<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><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>
<!-- 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>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">
<span>Tag text</span>
<i class="ds-icon --icon-user"></i>
</div><div class="ds-tag --color-yellow">
<i class="ds-icon --icon-user --color-magenta"></i>
<span>Tag text</span>
</div>Size
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>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>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.
<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>
<!-- Class: --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><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>
<!-- Class: --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.
<!-- 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><!-- 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).
<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><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><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 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>