Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Tools
  • Badge

    Spectrum docs

    Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.

    Property Type Values Default Required Description
    label string - - No When the label is not defined, the badge appears as icon-only.
    icon - - - No -
    variant string neutral, info, positive, negative, indigo, yellow, magenta, fuchsia, purple, seafoam, accent, notice, gray, red, orange, chartreuse, celery, green, cyan, blue, pink, turquoise, brown, cinnamon, silver - No -
    style string bold, subtle, outline - No -
    fixed string none, top, right, bottom, left none No -
    isDisabled boolean - false No -
    size string s, m, l, xl s No -