Tier B

RN-universal Chip pilot

Scaffolded

Rounded pill with optional left icon and removable trailing X. State-coloured variants (success/warning/error/info) are brand-invariant — they use the shared state tokens. Primary uses the current brand accent.

Side-by-side: variants

shadcn (div)
Default
Primary
Success
Warning
Error
Info
RN (View + Text via RN Web)
Default
Primary
Success
Warning
Error
Info

Sizes

Small
Medium
Large

With left icon

Approved
Pending review
Featured

Removable (interactive)

Mathematics
Literature
History
Science

Semantics

AspectshadcnRNNotes
Container<div><View>Parity
Remove button<button aria-label><Pressable accessibilityRole="button" accessibilityLabel=…>Announces action
Remove icon<X svg><X lucide>Same icon library
State variantsCSS vars inlineCSS vars inlineBrand-invariant state tokens