#Tag

An interactive chip for a keyword or attribute the reader can select or remove — a chip that only states a value is a Badge. Give it one job: Carbon warns against tags carrying several functions at once, and a chip that both filters and deletes is one people trigger by accident.

Source · Storybook

#Usage

import { Tag } from '@wallarm-org/design-system/Tag';

#Examples

#Sizes

The same two heights as Badge, so a row mixing them stays level.

#Disabled

Out of the tab order and unclickable, but still readable — a filter that cannot currently apply is still information.

#Closable

A dismiss control for a value the reader added, such as an applied filter. Removal is the only thing the control should do.

#Selectable

A toggle, for filtering by tapping the values themselves. Selected state has to be visible without colour alone.

#With icons

An icon beside the label, carrying the kind of thing rather than its state.

#With on click

A plain click handler, for a chip that navigates or opens rather than toggling — but not as a link, which Carbon rules out for tags.

#Props

#TagClose

#Explorer