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

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

Removable

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

Variants

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 '@reckon-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>
);
}
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo