display

Badge

Inline label for status, counts, or categories.

Import

import { Badge } from '@stella-ds/react'

Props

PropTypeDefaultDescription
variant'solid' | 'outline' | 'subtle''solid'Visual fill style
color'default' | 'primary' | 'success' | 'warning' | 'error''default'Color semantic
size'sm' | 'md''md'Size preset

Preview

DefaultPrimarySuccessWarningError
SubtleOutlineSolid

Examples

Basic

<Badge variant="subtle" color="success">Published</Badge>
Background
All Components
Breadcrumb