Tag

Options

Basic usage

div

html

Copy

span (inline)

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

html

Copy

label and checkbox

All text should be contained within the span element

html

Copy

label and radio

html

Copy

Indeterminate state

html

Copy

Styles

Default

html

Copy

Outline

html

Copy

Pinned

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

html

Copy

html

Copy

Fee

html

Copy

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

Basic usage with color

html

Copy

Basic usage with icon

html

Copy

Text formatting

html

Copy

Text overflow

html

Copy

Label wrapping

html

Copy

Combined example

html

Copy

Visual states

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

Default style

html

Copy

Outline style

html

Copy

Component color

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

Default style

html

Copy

Outline style

html

Copy

Icons

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

html

Copy

html

Copy

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

html

Copy

Inline icon with color

html

Copy

Size

Xsmall

html

Copy

Small

html

Copy

Default

html

Copy

Medium

html

Copy

Large

html

Copy

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

Outline style

html

Copy

Strong content

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

Default style

html

Copy

Outline style

html

Copy

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

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

--glow

html

Copy

--blink

html

Copy

Buttons

html

Copy

Examples

Styled content

html

Copy

Styled content with icons

html

Copy

Styled content with icons and visual state

html

Copy

Styled content with icons and component colors

html

Copy

Styled content with checkboxes

html

Copy

Styled content with checkboxes and icons

html

Copy

Styled content with radio

html

Copy

Checkbox large outline style

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

html

Copy

Radio large outline style

html

Copy

Checkbox medium outline style

html

Copy

Radio medium outline style

html

Copy

Inside headings

html

Copy

Visual states with icons

Default style

html

Copy

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