Badge — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add badge

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Badge } from 'orn-ui/badge';

Depende de:core (theme + icons)

Uso

cuándo usarlo — Un estado corto, de solo lectura, pegado a otra cosa. Nunca maneja un press.
variant — Semántica, no decorativa: `success`, `error`, `warning`, `info`, `neutral` (el default).
backgroundColor / textColor — Override manual, para estados propios del producto que las cinco variantes no cubren.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

success

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

error

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

warning

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

info

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

neutral

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

all together

<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

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

Código completo del demo

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