Components

Tag

Labels a category, an applied filter or a recipient; it can be removable or selectable.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Tag } from '@bigbang/ui';
Source: Tag.tsx
Storybook: Tag · Playground

Tag is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab.

import { Tag } from '@bigbang/ui';

<Tag.Group aria-label="Labels">
  <Tag onRemove={() => remove('design')}>Design</Tag>
  <Tag onRemove={() => remove('development')}>Development</Tag>
</Tag.Group>;

Props

tone

Description: What the tag stands for. Neutral is the default; the other tones give a pastel fill, border and text. violet, teal and pink are category hues with no status meaning.
Type: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger' | 'violet' | 'teal' | 'pink'
Default: 'neutral'

size

Description: Height and inline padding: 24 and 32 px.
Type: 'sm' | 'md'
Default: 'md'

icon

Description: Decorative icon element before the label, 12 or 16 px. Screen readers skip it; the label carries the meaning.
Type: ReactElement

disabled

Description: Turns off interaction of a removable or selectable tag and greys it out. A static tag only greys out.
Type: boolean
Default: false

className

Description: For layout only: margins and alignment. Do not use it to change colour or size.
Type: string

childrenRequired

Description: The label text. Keep it to one or two words; it also names the remove button.
Type: string

onRemove

Description: Shows a remove button after the label and calls this when the tag is removed by click, Enter, Space, Backspace or Delete. Remove the tag from your list in it. A tag cannot be both removable and selectable.
Type: () => void

removeLabel

Description: Accessible name of the remove button. Without it the library string ui.tag.remove is used in the Provider's language ("{label} kaldır" or "Remove {label}").
Type: string

selected

Description: Makes the tag a toggle and sets its state (controlled). Selected tags use the brand colours and show a check mark. A tag cannot be both selectable and removable.
Type: boolean

defaultSelected

Description: The initial state of a selectable tag when you do not control it.
Type: boolean
Default: false

onSelectedChange

Description: Called with the new state when the user toggles the tag.
Type: (selected: boolean) => void

onRemove cannot be combined with selected, defaultSelected or onSelectedChange; the type definition prevents it.

Parts

Part	Element	Props
`Tag.Icon`	`<span>`	`children`: the icon element. Decorative (`aria-hidden`).
`Tag.Label`	`<span>`	`children`: the text. Truncated when it overflows.
`Tag.Remove`	`<button>`	`label`, `onRemove`, `removeLabel`, `disabled`. Backspace and Delete remove too.
`Tag.Group`	`<ul role="list">`	`aria-label` (required), `onEmpty`, `className`. Manages focus after removal.

Data attributes

data-component="tag", data-tone, data-size, data-disabled: on the tag element.
data-component="tag-group": on the group element.
data-part: icon, label, mark, remove.

Removal and focus

Keep the list in your own state and give every tag a stable key. Focus management watches the removed tag leave the DOM, so it works whether your list state changes at once or on a later tick.

const [items, setItems] = useState(['Design', 'Development']);

<Tag.Group aria-label="Labels" onEmpty={() => addButtonRef.current?.focus()}>
  {items.map((item) => (
    <Tag key={item} onRemove={() => setItems((current) => current.filter((name) => name !== item))}>
      {item}
    </Tag>
  ))}
</Tag.Group>;