Tier A
RN-universal Badge pilot
ScaffoldedPill-shaped status marker. Pure View + Text with CVA variants — no Radix, no DOM-specific affordances. Same four variants as the shadcn Badge.
Side-by-side: variants
shadcn (span)
DefaultSecondaryDestructiveOutline
RN (View + Text via RN Web)
Default
Secondary
Destructive
Outline
Status examples
Draft
In review
Rejected
Archived
Semantics
| Aspect | shadcn | RN | Notes |
|---|---|---|---|
| Element | <span> | <View><Text>…</Text></View> | RN View has no text semantics; Text must be nested |
| Role | implicit | accessibilityRole="text" | RN Web translates to role="text" on the host element |
| asChild slot | @radix-ui/react-slot | not supported | Slot composition is DOM-only; compose at call-site instead |
| Destructive focus ring | ring-destructive/40 | same (via className) | Parity via shared Tailwind utility classes |