Badge·component·@astryxdesign/core

Badge

Badge highlights a status or category at a glance. Use it sparingly: only when a value represents a distinct state (Active, Failed) or a grouping tag (Engineering, Design). Most metadata (dates, durations, counts, descriptions) should be plain description text, not badges.

Open in Playground @astryxdesign/core/Badge

Showcases and examples

4 documented examples

Badge — Variants

All semantic and color badge variants in a single view. Use semantic variants for status and color variants for categories.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · badge-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Badge} from '@astryxdesign/core/Badge';
import {Stack} from '@astryxdesign/core/Layout';

export default function BadgeShowcase() {
  return (
    <Stack direction="vertical" gap={4} hAlign="center">
      <Stack direction="horizontal" gap={2}>
        <Badge label="Neutral" variant="neutral" />
        <Badge label="Info" variant="info" />
        <Badge label="Success" variant="success" />
        <Badge label="Warning" variant="warning" />
        <Badge label="Error" variant="error" />
      </Stack>
      <Stack direction="horizontal" gap={2}>
        <Badge label="Blue" variant="blue" />
        <Badge label="Purple" variant="purple" />
        <Badge label="Pink" variant="pink" />
        <Badge label="Teal" variant="teal" />
        <Badge label="Orange" variant="orange" />
      </Stack>
    </Stack>
  );
}

Usage

Every status badge steals attention. Only badge states where the user needs to notice or act: errors, warnings, items requiring follow-up. If no action is needed, plain text is fine.
Use success, warning, and error variants only for system status that demands attention: "Failed", "Degraded", "Action Required". These have bold solid backgrounds designed to stand out.
Use color variants (blue, purple, teal, etc.) for category tags that group or classify items: team names, content types, priority levels.
Keep labels to one or two words. If you need more detail, put it in surrounding text instead of the badge.
Add an icon when it helps identify the badge type quickly, but always include a text label alongside it.
Apply a "success" badge to every healthy/active/normal item. If all rows show green "Active" badges, none stand out; the badge adds noise, not information. Show only the states that need user attention (errors, warnings, pending actions).
Use badges for metadata. Durations ("6h window"), counts ("12 trigger types"), dates, and descriptions are not statuses or categories; use description text (Text with type="supporting") instead.
Use semantic status variants (success, warning, error, info) for categories or informational content. These are visually loud and should only indicate system state.
Repeat the same badge in every row of a table or list. If the same value appears in most rows, it's not adding information; use plain text for common states and reserve badges for the exceptional ones.
Make badges clickable; they are read-only indicators. Use a button or link if the user needs to take action.

Typed props

Prop	Type and behavior
`variant`	`'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'blue' \| 'cyan' \| 'green' \| 'orange' \| 'pink' \| 'purple' \| 'red' \| 'teal' \| 'yellow'` · default 'neutral' Visual style variant. Semantic variants (neutral, info, success, warning, error) use solid backgrounds. Non-semantic color variants use tinted backgrounds with colored text for categorization and tagging.
`label`	`ReactNode` Badge text content. A badge is one line, so a label wider than the space available is cut with an ellipsis rather than escaping its container; a string or number label is also set as the badge's title so the full text stays reachable on hover.
`icon`	`ReactNode` Optional leading icon. Slot: Icon

Anatomy

Icon · optional

An optional leading icon that helps identify the badge type at a glance.

Label · required

The text or number shown inside the badge.

Theming

Targets

astryx-badge

Visual props: variant