Token is a small, inline element for representing discrete pieces of associated data, like tags, categories, or selections. Use it to label content, show active filters, or represent removable items like selected recipients in a compose field.
Preview loads on approachPreview loads on approach
Exact source · token-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {Token} from '@astryxdesign/core/Token';
import {Icon} from '@astryxdesign/core/Icon';
import {Stack} from '@astryxdesign/core/Layout';
import {TagIcon} from '@heroicons/react/24/outline';
export default function TokenShowcase() {
return (
<Stack direction="horizontal" gap={2} vAlign="center">
<Token label="Default" />
<Token label="Removable" color="blue" onRemove={() => {}} />
<Token
label="Design"
color="purple"
icon={<Icon icon={TagIcon} size="sm" color="inherit" />}
/>
</Stack>
);
}
Usage
Token is a small, inline element for representing discrete pieces of associated data, like tags, categories, or selections. Use it to label content, show active filters, or represent removable items like selected recipients in a compose field.
Use color to distinguish categories (for example, green for "Active", red for "Blocked", blue for "In Review") so users can scan status at a glance.
Provide an onRemove callback when tokens represent user selections that can be undone, like filters or multi-select values.
Add a leading icon when it helps identify the token type faster, like a person icon for user tokens or a tag icon for labels.
Keep labels short: one to three words. Tokens truncate with ellipsis when the text overflows.
Don't use tokens for primary actions or navigation; use Button or Link instead. Tokens are for displaying metadata, not triggering workflows.
Don't hide the label unless the icon alone is universally understood. A color dot without text is ambiguous.
Don't mix too many colors in one token group. Stick to two or three meaningful colors so the palette stays scannable.
