Vivid Logo Vivid

Tags

Tags are small, interactive labels used to visually group, classify, or filter criteria. Tags are wrapped with Tag Group

Tags should be wrapped by the Tag Group component to provide the correct layout and also semantic meaning.

Label

The label attribute adds label text to the Tag.

Selectable

The selectable attribute enables the selectable behaviour. Use the selected attribute to mark the Tag as selected.

Removable

The removable attribute enables the removable behaviour. Clicking the remove icon removes the Tag from the Tag Group

Appearance

The appearance attribute sets the Tag's appearance.

Connotation

The connotation attribute sets the Tag's connotation. It accepts a subset of predefined values.

Shape

The shape attribute sets Tag's shape.

Icon

The icon attribute can set to display an icon from the icon library on the component.

The preferred way to add icons is to use the icon slot.

The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.

Disabled

The disabled attribute sets the disabled state.