Badge

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

#Default usage

<div className="docs-preview-row">
  <Badge>Neutral</Badge>
  <Badge variant="success">Stable</Badge>
  <Badge variant="info">Beta</Badge>
  <Badge variant="warning">Review</Badge>
  <Badge variant="error">Blocked</Badge>
</div>

#Import

import { Badge } 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

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