Badge

Live preview

Status badges in an order list context.

On app background

ShippedDelayedFailedIn transit

Orders

#1042 — Studio deskDelivered

#1041 — Monitor armProcessing

#1040 — Cable kitDraft

Account

SubscriptionPro

SecurityAction needed

All variants

DefaultBrandAccentSuccessWarningErrorInfo

Badge

Compact status label with variants and an optional icon.

Usage

import { Badge } from "@truongdq01/ui";
import { Check } from "lucide-react-native";

<Badge label="Active" variant="success" />
<Badge label="Synced" variant="brand" icon={<Check />} />

Props

| Prop | Type | Default | Description | | --------- | ----------- | ------- | -------------------------- | --------- | ------- | ------- | ----------- | ------------ | | label | string | — | Badge text | | variant | "default" | "brand" | "accent" | "success" | "warning" | "error" | "info" | "default" | Visual style | | icon | ReactNode | — | Optional icon before label |

Variants

Use the variant prop to match semantic intent:

• default
• brand
• accent
• success
• warning
• error
• info

Visible surfaces

Every variant uses background + border + text so badges read on normal app backgrounds without blur or overlay blending.

See Visual Baseline — visible surface matrix for white, app, card, glass, and dark test panels.

<Badge label="Delivered" variant="success" />
<Badge label="Premium" variant="accent" />
<Badge label="Draft" variant="default" />