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.

Updated in eds-core/1.31.0

Figma LibraryView in StorybookView in Playroom

Quick Start

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

Variant​

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

API Reference​

Badge

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.