amezquita design systemGet started

Primitives

Tag

Inline label for categorising or annotating content — non-interactive

Markdown version for agents

Import
import { Tag } from '@amezquita/design-system/components/primitives/Tag'

Live render

basetokensreacta11y

    Props

    PropTypeDescription
    variant?'default' | 'accent' | 'muted'
    childrenReact.ReactNode
    label?stringAccessible label for the outer clickable element. Required when onClick is set and children is not a plain string.
    icon?React.ReactNode
    removable?boolean
    onRemove?() => void
    onClick?() => void

    Tokens

    TokenTypeValue
    --tag-font-weightfontWeight500
    --tag-muted-backgroundcolortransparent
    --tag-padding-xdimension12px
    --tag-padding-ydimension4px

    Usage example

    tsx
    <Tag
  variant="default"
>Default</Tag>

    Accessibility

    • Renders <span> — purely presentational; no ARIA requirements
    • Never use Tag as an interactive element; wrap in <button> or <a> if the tag must be clickable