Feedback & indicators
Tag
Use tags to label, classify or categorise items that are mapped to one or multiple categories.
import { Tag } from '@balance-web/tag';Loading demo…
Usage
Loading demo…
Removable
Allow users to remove tags from an interface with the "onRemove" property.
Loading demo…
Variants
Supports variant colours from the theme, accessible by index.
Loading demo…
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>
);
}