Components

Tag

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

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook for the controls.

Live example, StorybookOpen in Storybook

Default

A Tag is a short label: outlined, with a transparent background, 32 px tall. The default Tag is neutral and not interactive.

Label

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

export default function Default() {
  return <Tag>Label</Tag>;
}

Tones

There are six tones: neutral, brand, info, success, warning and danger. The tone colours only the border and text; the text carries the meaning. Neutral is enough for most tags.

NeutralBrandInfoSuccessWarningDanger

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

export default function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag tone="neutral">Neutral</Tag>
      <Tag tone="brand">Brand</Tag>
      <Tag tone="info">Info</Tag>
      <Tag tone="success">Success</Tag>
      <Tag tone="warning">Warning</Tag>
      <Tag tone="danger">Danger</Tag>
    </div>
  );
}

Sizes

size sets the height and inline padding: sm is 24 px, md is 32 px. Use sm in dense lists and table cells.

SmallMedium

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

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag size="sm">Small</Tag>
      <Tag size="md">Medium</Tag>
    </div>
  );
}

With an icon

icon adds a decorative icon before the label. Screen readers skip it; the label text carries the meaning.

DesignResearch

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

export default function WithIcon() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag icon={<Icon name="user" size="inherit" />}>Design</Tag>
      <Tag tone="info" icon={<Icon name="info" size="inherit" />}>
        Research
      </Tag>
    </div>
  );
}

Removable

onRemove adds a real button after the label. Its name comes from the library string, such as “Remove Design”; removeLabel replaces it. Put the tags in a Tag.Group: Backspace or Delete on the focused remove button removes the tag, and focus moves to the next tag’s button.

Design
Development
Research

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

export default function Removable() {
  const [items, setItems] = useState(['Design', 'Development', 'Research']);
  return (
    <Tag.Group aria-label="Labels">
      {items.map((item) => (
        <Tag key={item} onRemove={() => setItems((current) => current.filter((name) => name !== item))}>
          {item}
        </Tag>
      ))}
    </Tag.Group>
  );
}

Selectable

selected or defaultSelected turns the tag into a toggle button (aria-pressed). A selected tag takes the brand colours and shows a check mark. A selectable tag cannot be removed.

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

const items = ['Design', 'Development', 'Research'];

export default function Selectable() {
  const [selected, setSelected] = useState(['Design']);
  return (
    <Tag.Group aria-label="Filters">
      {items.map((item) => (
        <Tag
          key={item}
          selected={selected.includes(item)}
          onSelectedChange={(next) => setSelected((current) => (next ? [...current, item] : current.filter((name) => name !== item)))}
        >
          {item}
        </Tag>
      ))}
    </Tag.Group>
  );
}

Disabled

disabled turns off the remove button or the toggle and greys the tag out. A disabled tag leaves the tab order.

Design

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

export default function Disabled() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag disabled onRemove={() => {}}>
        Design
      </Tag>
      <Tag disabled defaultSelected>
        Research
      </Tag>
    </div>
  );
}

Light and dark mode

Tag takes every colour from status and border tokens; it keeps the same structure in both modes.

NeutralBrandInfoSuccessWarningDanger

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

export default function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-sm">
      <Tag tone="neutral">Neutral</Tag>
      <Tag tone="brand">Brand</Tag>
      <Tag tone="info">Info</Tag>
      <Tag tone="success">Success</Tag>
      <Tag tone="warning">Warning</Tag>
      <Tag tone="danger">Danger</Tag>
    </div>
  );
}