Badge

A badge is a visual label or indicator used to convey status or highlight content.

The Badge component has been updated with a new variant system, improved typography, adjusted padding, and shape options based on the latest design specifications.

Figma LibraryView in StorybookView in PlayroomAPI Reference

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Badge } from '@adaptavant/eds-core';
Added
1.0.0

Basic Usage​

The Badge uses a variant system with both Secondary (light backgrounds) and Primary (solid backgrounds) options.

Primary Variants​

Solid backgrounds with white text for strong emphasis.

SuccessErrorImportantAlert
{/* positivePrimary */}
<Badge variant="positivePrimary">
  Success
</Badge>

{/* criticalPrimary */}
<Badge variant="criticalPrimary">
  Error
</Badge>

{/* neutralPrimary */}
<Badge variant="neutralPrimary">
  Important
</Badge>

{/* cautionPrimary */}
<Badge variant="cautionPrimary">
  Alert
</Badge>
View in Playroom

Secondary Variants​

Light backgrounds with colored text for subtle emphasis.

ActiveErrorDraftWarning
{/* positiveSecondary */}
<Badge variant="positiveSecondary">
  Active
</Badge>

{/* criticalSecondary */}
<Badge variant="criticalSecondary">
  Error
</Badge>

{/* neutralSecondary */}
<Badge variant="neutralSecondary">
  Draft
</Badge>

{/* cautionSecondary */}
<Badge variant="cautionSecondary">
  Warning
</Badge>
View in Playroom

Tone (Deprecated)​

⚠️ The tone prop is deprecated and will be removed in a future version. Use the new variant prop instead.

The Badge is available in four tones, positive is the default.

Deprecated positiveDeprecated criticalDeprecated neutralDeprecated caution
New positiveSecondaryNew criticalSecondaryNew neutralSecondaryNew cautionSecondary
{/* Deprecated tone prop */}
<Box className="flex gap-2">
  <Badge tone="positive">Deprecated positive</Badge>
  <Badge tone="critical">Deprecated critical</Badge>
  <Badge tone="neutral">Deprecated neutral</Badge>
  <Badge tone="caution">Deprecated caution</Badge>
</Box>

{/* New variant prop (recommended) */}
<Box className="flex gap-2">
  <Badge variant="positiveSecondary">New positiveSecondary</Badge>
  <Badge variant="criticalSecondary">New criticalSecondary</Badge>
  <Badge variant="neutralSecondary">New neutralSecondary</Badge>
  <Badge variant="cautionSecondary">New cautionSecondary</Badge>
</Box>
View in Playroom

Sizes​

Customize the size of the Badge via the size prop. Standard is the default.

StandardSmall
<Box className="flex items-center gap-2">
  {/* Standard */}
  <Badge variant="positiveSecondary" size="standard">
    Standard
  </Badge>

  {/* Small */}
  <Badge variant="criticalSecondary" size="small">
    Small
  </Badge>
</Box>
View in Playroom

Icon​

Add icons to your badges using the iconStart prop for enhanced visual communication.

VerifiedVerifiedWarningWarning
<Box className="flex items-center gap-2">
  {/* Badge with check icon for success states */}
  <Badge variant="positiveSecondary" iconStart={CheckIcon}>
    Verified
  </Badge>

  <Badge isRounded variant="positiveSecondary" iconStart={CheckIcon}>
    Verified
  </Badge>

  {/* Badge with alert icon for warnings */}
  <Badge size="small" variant="cautionPrimary" iconStart={WarningIcon}>
    Warning
  </Badge>

  <Badge size="small" isRounded variant="cautionPrimary" iconStart={WarningIcon}>
    Warning
  </Badge>
</Box>
View in Playroom

IsRounded​

The Badge supports two shape options controlled by the isRounded prop:

  • Default (isRounded={false}): Rounded corners using 4px border radius for a subtle, modern look
  • Circular (isRounded={true}): Fully circular shape using rounded-full for a more prominent appearance
StatusCheck
{/* Default rounded corners */}
<Badge variant="positiveSecondary">
  Status
</Badge>

{/* Circular shape */}
<Badge variant="criticalPrimary" isRounded={true}>
  Check
</Badge>
View in Playroom

Interactive​

Use the as prop to render a Badge as a button or a element, enabling native interactivity and accessibility. These elements receive proper keyboard focus and display a focus ring, so you don't need to wrap a span or handle clicks manually. Props are type-safe and context-aware: for example, href is valid only when as="a", and type applies only when as="button".

Verified
Pending
<Box className="flex items-center gap-2">
  {/* Renders a button — activated by click, Enter and Space */}
  <Badge as="button" variant="neutralSecondary" onClick={() => {}}>
    Add filter
  </Badge>

  {/* Renders an anchor — follows the link, supports target and rel */}
  <Badge
    as="a"
    href="https://earth.anywhere.co"
    iconStart={CheckIcon}
    isRounded
    rel="noopener"
    target="_blank"
    variant="positiveSecondary"
  >
    Verified
  </Badge>

  {/* The default span stays inert — no tab stop, no role */}
  <Badge isRounded variant="cautionSecondary">
    Pending
  </Badge>
</Box>
View in Playroom

API Reference​

Badge

PropDefaultDescription
children_React.ReactNode
The content of the component
as?spanReact.ElementType
HTML element or component to render.
  • button and a produce fully interactive elements: keyboard-focusable with a visible focus ring.
  • The default, span, is non-interactive: it does not receive keyboard focus and has no ARIA role.
onClick?_(event: React.MouseEvent) => void
Click handler. Use it with as="button" so the badge is also operable by keyboard.
href?_string
Always pass this with as="a" — an anchor without an href is not keyboard focusable.
target?, rel?_string
Only valid when as="a".
variant?positiveSecondary'neutralSecondary' | 'neutralPrimary' | 'criticalSecondary' | 'criticalPrimary' | 'positiveSecondary' | 'positivePrimary' | 'cautionSecondary' | 'cautionPrimary'
New variant system replacing tone-based styling
isRounded?falseboolean
Controls the border radius of the badge.
iconStart?_(props: IconProps) => React.ReactNode
The icon to be displayed at the start of the component. It will be rendered at 16px.
size?standard'standard' | 'small'
The size of the component

tone?

positive

'positive' | 'neutral' | 'caution' | 'critical'

⚠️ Deprecated, use variant instead.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

Badge parts​

Label
<Badge className="bg-accent-secondary" classNames={{ label: "text-secondary" , iconStart: "text-secondary" }}
  iconStart={EmojiIcon}>
  Label
</Badge>
View in Playroom
PartDescription
labelThe text content of the button.
iconStartThe icon displayed on the left side of the Badge.