Badge
Examples
Notification
The unread signal: a count or a dot, always --notification, through NotificationCount / NotificationDot (inline) or NotchBadge (docked on a round button, notification by default: the bag, the inbox and the bell all wear it). Never a raw Badge and never destructive: red here means "something new", not "delete". A count that is not a signal (listings under a tab) takes the muted count pill instead.
Solid
One variant key per look, as ReUI names them. secondary is the neutral chip, a soft foreground tint; outline is the same tint today.
Light
The tint of a role with its accent ink, and no stroke. Status chips use these. The label reads --<role>-accent, tuned for the tint, so warning stays legible where ReUI's foreground washes out.
Outline
Kept as ReUI's names. In Cüte they paint the same tint as -light.
Sizes
xs 16px, sm 18px, default 20px, lg 26px, xl 32px. The corner is about a quarter of the height.
With dot
With icons
Pill
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "success" | "warning" | "info" | "destructive" | "invert" | "primary-light" | "success-light" | "warning-light" | "info-light" | "destructive-light" | "invert-light" | "primary-outline" | "success-outline" | "warning-outline" | "info-outline" | "destructive-outline" | "invert-outline" | "notification" | "photo" | "default" | ReUI's variant names. `notification` (the unread count) and `photo` (a chip on a listing photo) are Cüte's own. |
| size | "xs" | "sm" | "default" | "lg" | "xl" | "default" | Height, padding and corner: 16, 18, 20, 26 and 32px. |
| radius | "default" | "full" | "default" | `default` keeps the size's own corner; `full` makes a pill. |
| render | React.ReactElement | ((props, state) => React.ReactElement) | — | Base UI's render prop: renders the badge as another element. |