# Badge

> Atom — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add badge
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { Badge } from 'orn-ui/badge';
```

Depende de: core (theme + icons)

## Variantes

### 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" />
```

## Código completo del demo

```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

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `label` | `string` | — | — |
| `variant?` | `'success' \| 'error' \| 'warning' \| 'info' \| 'neutral'` | neutral | — |
| `backgroundColor?` | `string` | — | Override manual, tiene precedencia sobre `variant`. |
| `textColor?` | `string` | — | — |
| `style?` | `StyleProp<ViewStyle>` | — | — |