Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Colors and disabled states
  • Sizes and leading icons
  • Clickable, linked, and hidden labels
  • Removal and end content
  • Recommendations
  • Usage boundaries
  • API reference

Data

Token

Displays colored tags, categories, links, or removable selections.

idle

Usage

import { Token } from "@mizen-labs/ui";

Examples

Colors and disabled states

Sizes and leading icons

Clickable, linked, and hidden labels

Removal and end content

Recommendations

GuidancePractice
Do

Use a short label, two or three meaningful category colors, and icons only when they help recognition. Keep hidden labels accessible.

Usage boundaries

GuidanceBoundary
Scope

Use Token for metadata, filters, and reversible selections. Combobox owns multi-select input behavior.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
labelstringrequiredVisible label and accessible name for interactive tokens.
colorTokenColordefaultEleven colors for categories and associated data.
size'sm' | 'md' | 'lg'md24px, 28px, or 32px token height.
iconReactNode—Decorative leading icon or avatar.
endContentReactNode—Trailing count or supporting content.
hrefstring—Native link destination. Disabled tokens drop it.
aria-descriptionstring—Accessible description of the token and its action.
disabledbooleanfalseDisables activation and removal.
onClickMouseEventHandler<HTMLElement>—Adds a native activation button when no href is supplied.
onRemoveMouseEventHandler<HTMLElement>—Adds a separate native remove button.
PreviousTableNextTree
Accessibility Keyboard Ready for review
default red orange yellow green teal cyan blue purple pink gray
default red orange yellow green teal cyan blue purple pink gray
Small Medium Large
Accessibility filter Activity Feed Unavailable link

No filter selected

Maya Chen Reviewers3 Locked filter

Maya is selected