Balance Logo
Reckon Design System
Open playroom


Tags are used to label, categorise or classify items using keywords that describe them.
pnpm add @balance-web/tag
Import usage
import {
} from '@balance-web/tag';
  • Code
  • API


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


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


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


Supports variant colours from the theme, accessible by index.

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 (
<Tag entity="company" label="Some Company Pty Ltd" />
Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo