Badge

Badge defines how EnterUI handles compact metadata and semantic status labels, including default structure, accessible states, and token-driven styling.

#Default usage

<HStack gap={12} wrap>
  <Badge>Neutral</Badge>
  <Badge variant="success">Stable</Badge>
  <Badge variant="info">Beta</Badge>
  <Badge variant="warning">Review</Badge>
  <Badge variant="error">Blocked</Badge>
</HStack>

#Import

import { Badge, HStack } from "@froggdesign/enter-ui-react";

#Accessibility

Badge renders a span. Do not rely on color alone for critical meaning; include clear text.

#API

• variant: neutral, success, warning, error, or info.
• Extends span props.

#Styling

Badges use semibold caption text, compact horizontal padding, a full pill radius, and softer semantic surfaces with restrained borders but no elevation. Direct SVG icons share a compact size and align with the label. Use warning for states needing attention; ordinary new and in-progress states can use neutral and info. Badges do not shrink or wrap inside rows. Keep a visible status label so meaning does not rely on color. The composed success Badge with StatusIndicator retains its uppercase category treatment; standalone status badges remain sentence case.

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.