Glowup
DATA DISPLAY · 47 / 89
StatusBadge
StatusBadge — a Material You data display component for React Native and web.
󱀫
packages/ui/src/components/StatusBadge.tsx
Live demo
󰗠
Active
Properties
3 controls
Label
Type
Success
󰍝
Icon Override
Usage
StatusBadge.tsx
<StatusBadge label="Active" />
Variants
The states and shapes this component is meant to be used in.
Types
󰗠
Active
󰀨
Payment failed
󰀦
Expiring soon
Custom icons
󱓟
Deployed
󰅝
Build broken
󰅐
Pending review
󱯬
Synced
Invoice list
INV-2041
€1,280.00
󰗠
Paid
INV-2042
€640.00
󰀨
Overdue
INV-2043
€2,110.00
󰀦
Due in 3 days
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
3 on StatusBadgeProps
label
required
string
icon
string
type
"success" | "error" | "warning"
default: "success"