Ravox KitBasics
Badge
A neutral badge with a dot in the mosaic color, or filled (solid) for the state that needs to stand out.
publicado
Settings
Toggles
Examples
Order status
Aguardando pagamentoPagoEnviadoEstornado
Solid: the state that stands out
ao vivovence hojenovobeta
Neutral
rascunhoem revisãov2.4.1
Installation
The command creates components/ui/badge.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add badgeProps
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "pink" | "yellow" | "lime" | "blue" | — | The dot color (or the background, with solid). The label stays neutral. |
| dot | boolean | true com color | Shows the dot before the text. |
| solid | boolean | false | Solid background in the color, no dot. The text is dark or white depending on the color and theme (4.5:1 or more). |
| ...props | ComponentProps<"span"> | — | Everything a <span> accepts. |