Badge

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

Updated in eds-core/1.9.0

Figma LibraryView in StorybookView in Playroom

Quick Start

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

Tones​

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

labellabellabellabel
{/* positive */}
<Badge tone="positive">
  label
</Badge>

{/* critical */}
<Badge tone="critical">
  label
</Badge>

{/* neutral */}
<Badge tone="neutral">
 label
</Badge>

{/* caution */}
<Badge tone="caution">
  label
</Badge>
View in Playroom

Sizes​

Customize the size of the Badge via the size prop, standard is the default.

labellabel
{/* standard */}
<Badge size="standard">
  label
</Badge>

{/* small */}
<Badge size="small">
  label
</Badge>
View in Playroom

Icon​

The Badge has iconStart prop to set icons. The icon size remains 16, irrespective of the Badge size.

labellabel
{/* iconStart */}
<Badge iconStart={CheckIcon}>
  label
</Badge>
{/* iconStart */}
<Badge size="small" iconStart={CheckIcon}>
  label
</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

Part

Description

label

The text content of the button.

iconStart

The icon displayed on the left side of the Badge.