> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge

> Label compact statuses with semantic visual tones

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`Badge` renders a short string in a rounded status label.

<LocalUiPlayground component="badge" title="Interactive Badge example" />

## Usage

```tsx theme={null}
import { Badge, View } from '@amisi-mobile-starter/ui';

export const StatusBadges = () => (
  <View className="flex-row gap-2">
    <Badge>Draft</Badge>
    <Badge variant="success">Active</Badge>
    <Badge variant="error">Failed</Badge>
  </View>
);
```

## Props

| Prop       | Type                                                       | Default     | Description    |
| ---------- | ---------------------------------------------------------- | ----------- | -------------- |
| `children` | `string`                                                   | Required    | Badge label.   |
| `variant`  | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'neutral'` | Semantic tone. |

`Badge` also accepts React Native `ViewProps`.