Alternatives

Badge — Use badges to highlight an item's status for quick recognition

Usage

Use tags to label, classify or categorise items that are mapped to one or multiple categories. This provides a way for the user to differentiate between them.

Tags should contain short easy-to-scan text. Use sentence case for the tag's label, unless it meets other capitalisation criteria.

Edit in Playroom

<Tag label="Label" />

Removable

Allow users to remove tags from an interface with the "onRemove" property.

Edit in Playroom

const [value, setValue] = useState('');
const [tags, setTags] = useState(['Chocolate', 'Vanilla', 'Strawberry']);
return (
  <Stack gap="large">
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setTags((old) => old.concat(value));
        setValue('');
      }}
    >
      <Field label="Add tag">
        <TextInput onChange={(e) => setValue(e.target.value)} value={value} />
      </Field>
    </form>
    <Inline gap="small">
      {tags.map((label, index) => (
        <Tag
          key={`${label}-${index}`}
          label={label}
          onRemove={() => setTags((old) => old.filter((l) => l !== label))}
        />
      ))}
    </Inline>
  </Stack>
);

Variants

Supports variant colours from the theme, accessible by index.

Edit in Playroom

<Inline gap="small">
  <Tag label="Contacts" variant={0} />
  <Tag label="Ledger" variant={1} />
  <Tag label="User Management" variant={2} />
  <Tag label="Workflow" variant={3} />
  <Tag label="Portal" variant={4} />
  <Tag label="Payroll" variant={5} />
</Inline>

Semantic augmentation

To assign semantic meaning to "variant" we recommend that you map the decorative colour indexes to a prop relevant to your product, and export the updated component.

import {
  Tag as BalanceTag,
  TagProps as BalanceTagProps,
} from '@balance-web/tag';
// Assign semantic meaning, in this example "entities", to decorative indexes
const ENTITIES = ['trust', 'company', 'individual'];
// Define prop-types, prefer inference to declaration
type OwnProps = { entity: typeof ENTITIES[number] };
// NOTE: omit "variant" because we're using "entity" to control the appearance, but we still want to support the rest of `BalanceTagProps`
type TagProps = OwnProps & Omit<BalanceTagProps, 'variant'>;
// Export your product's version of the `Tag` component
export const Tag = ({ entity, ...props }: TagProps) => {
  // map the "entity" prop to its index
  return <BalanceTag variant={ENTITIES.indexOf(entity)} {...props} />;
};

Then import the product-specific Tag for use in your application.

import { Tag } from '../relative/path';
function SomeComponent() {
  return (
    <div>
      ...
      <Tag entity="company" label="Some Company Pty Ltd" />
    </div>
  );
}