# Badge

> Atom — orn-ui

> ⚠️ Requires <UIProvider>: This component (like every orn-ui component) must render inside a <UIProvider> ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild.

## Installation

Install just this component (copies the source into your project, no npm dependency)
```bash
npx orn-ui add badge
```

Or install the whole package and import it
```tsx
pnpm add orn-ui
import { Badge } from 'orn-ui/badge';
```

Depends on: core (theme + icons)

## Variants

### success

```tsx
<Badge label="PAID" variant="success" />
```

### error

```tsx
<Badge label="OVERDUE" variant="error" />
```

### warning

```tsx
<Badge label="PENDING" variant="warning" />
```

### info

```tsx
<Badge label="DRAFT" variant="info" />
```

### neutral

```tsx
<Badge label="ARCHIVED" variant="neutral" />
```

### all together

```tsx
<VariantRow>
  <Badge label="PAID" variant="success" />
  <Badge label="OVERDUE" variant="error" />
  <Badge label="PENDING" variant="warning" />
  <Badge label="DRAFT" variant="info" />
  <Badge label="ARCHIVED" variant="neutral" />
</VariantRow>
```

### custom colors

```tsx
<Badge label="VIP" backgroundColor="#7c3aed20" textColor="#7c3aed" />
```

## Full demo source

```tsx
const variants: VariantDef[] = [
  { label: 'success', content: <Badge label="PAID" variant="success" /> },
  { label: 'error', content: <Badge label="OVERDUE" variant="error" /> },
  { label: 'warning', content: <Badge label="PENDING" variant="warning" /> },
  { label: 'info', content: <Badge label="DRAFT" variant="info" /> },
  { label: 'neutral', content: <Badge label="ARCHIVED" variant="neutral" /> },
  {
    label: 'all together',
    content: (
      <VariantRow>
        <Badge label="PAID" variant="success" />
        <Badge label="OVERDUE" variant="error" />
        <Badge label="PENDING" variant="warning" />
        <Badge label="DRAFT" variant="info" />
        <Badge label="ARCHIVED" variant="neutral" />
      </VariantRow>
    ),
  },
  { label: 'custom colors', content: <Badge label="VIP" backgroundColor="#7c3aed20" textColor="#7c3aed" /> },
];
return <VariantList variants={variants} />;
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | — | — |
| `variant?` | `'success' \| 'error' \| 'warning' \| 'info' \| 'neutral'` | neutral | — |
| `backgroundColor?` | `string` | — | Manual override, wins over `variant`. |
| `textColor?` | `string` | — | — |
| `style?` | `StyleProp<ViewStyle>` | — | — |