Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA badge with solid, light and outline appearances in primary, info, success, warning, destructive, inverted and focus tones, five sizes and a pill radius.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
It installs to components/reui/badge.tsx, next to your own components/ui/badge.tsx, so neither replaces the other.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | solid (default, secondary, info, success, warning, destructive, invert, focus), light (primary-light, info-light, ...) or outline (primary-outline, info-outline, ...) | "default" | Tone and appearance. |
size | "xs" | "sm" | "default" | "lg" | "xl" | "default" | The height and text size. |
radius | "default" | "full" | "default" | full makes it a pill. |
asChild | boolean | false | Render as the child element, for example a link. |
A badge is plain text in a span, so a screen reader reads its label. Do not rely on the tone alone to carry meaning: put the status in the text ("Paid", "Failed"). The solid and light tones are chosen to keep their text readable on the background.
Based on ReUI (MIT, Copyright (c) 2025 Keenthemes Inc), adapted for tealmac UI. See the third-party notices.