Badge

#Default usage

#Usage

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

export function Example() {
  return (
    <>
      <Badge>Neutral</Badge>
      <Badge variant="success">Stable</Badge>
      <Badge variant="info">Beta</Badge>
      <Badge variant="warning">Review</Badge>
      <Badge variant="error">Blocked</Badge>
    </>
  );
}

#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.