Badge — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add badge

Or install the whole package and import it

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

Depends on:core (theme + icons)

Usage

when to use — A short read-only status attached to something else. It never handles a press.
variant — Semantic, not decorative: `success`, `error`, `warning`, `info`, `neutral` (the default).
backgroundColor / textColor — Manual override, for statuses your product defines and the five variants do not cover.

Demo clip not recorded yet — see MEDIA.md

Variants

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

Full demo source

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