amezquita design systemGet started

Primitives

Badge

Small status indicator or numeric count overlay attached to another element

Markdown version for agents

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

Live render

LiveDraft3

    Props

    PropTypeDescription
    variant?'neutral' | 'success' | 'warning' | 'error' | 'info'
    shape?'dot' | 'status' | 'count'
    aria-label?string
    children?never | React.ReactNode

    Also accepts all props of: Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'aria-label' | 'role'>

    Tokens

    TokenTypeValue
    --badge-count-sizedimension20px
    --badge-dot-sizedimension8px
    --badge-font-weightfontWeight500
    --badge-padding-xdimension8px
    --badge-padding-ydimension4px

    Usage example

    tsx
    <Badge>Label</Badge>