Balance Logo
Balance
Reckon Design System

Tag

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

Usage

Use tags to label, classify or categorise items that are mapped to one or multiple categories (or similar). 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's a product name eg.

In the default form of a Tag, only the label is required.

Label
Open in Playroom

Variants

The Tag supports the decorative colours from theme, with five available in the default theme.

Contacts+
Ledger+
User Management+
Workflow+
Portal+

Mapping

You may find that mapping the decorative colour indexes to semantic props can be helpful when building in-app.

import { Tag as BalanceTag, TagProps } from '@reckon-web/tag';
// This lets the consumer specify their own semantic meaning
const entities = ['trust', 'company', 'individual'];
// Note that `variant` is no-longer a valid prop because we're using `entity` to control the appearance
type Props = { entity: typeof entities[number] } & Omit<TagProps, 'variant'>;
export const Tag = ({ entity, ...props }: Props) => {
return <BalanceTag variant={entities.indexOf(entity)} {...props} />;
};

Then import the augmented, locally scoped, Tag for use in-app.

import { Tag } from '../local/path/to/Tag';
function SomeComponent() {
return (
<div>
<Tag entity="company" label="Company" />
</div>
);
}
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.