Tag
Options
Basic usage
div
span (inline)
To use a tag inline (within text content), apply ds-tag and options to a span element.
label and checkbox
All text should be contained within the span element
label and radio
Visual states
Both tag styles (default and outline) adhere to 4x preset visual states - alert, warning, success and info.
Component colors
Both tag styles (default and outline) support component color classes.
Icons
Add an additional class such as --icon-user from the available icon modifier list. Alternatively you can use an inline icon.
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.
Size
Xsmall
Small
Default
Medium
Large
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.
Strong content
If a tag contains a strong element, it will be styled differently.
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).
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.
Buttons
Styles
Variants
Default
Outline
Pinned
Pinned tags will be affixed to the top left of the container
Fee
Plan
The --plan variant can be used for static plan tags. For generated plan labels, use ds-plan.
AI
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).
Fence
This style only applies to tags with three or more text child elements (spans/strong).
The first and last items are shown as narrow as possible at the start and end of the tag.
Middle items are shown in the center column, one per row.
Shape
Square
Rounded
Examples
Styled content
Styled content with icons
Styled content with icons and visual state
Styled content with icons and component colors
Styled content with checkboxes
Styled content with checkboxes and icons
Styled content with radio
Checkbox large outline style
This combination mirrors the previously available ds-checkbox--tags. Additional features and options are shown above.
Radio large outline style
Checkbox medium outline style
Radio medium outline style
Inside headings
Visual states with icons
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.
Manifest
The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.
Latest version: https://assets.soracom.io/sds/3.32.1/ds-tag/manifest.json?v=3.32.1