Badge
The props declared for Badge, generated from the types @proyecto-viviana/ui ships.
Import
import { Badge } from "@proyecto-viviana/ui";Props
Differs from @proyecto-viviana/solid-spectrum
variantadds 'live', 'metric'; does not have 'orange'.
| Prop | Type | Default | Description |
|---|---|---|---|
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | The content to display in the badge. |
count | number | — | Backward-compatible count content. Prefer children for S2 parity. |
size | 'S' | 'M' | 'L' | 'XL' | 'sm' | 'md' | 'lg' | 'S' | The size of the badge. |
variant | 'primary' | 'secondary' | 'accent' | 'negative' | 'warning' | 'success' | 'informative' | 'neutral' | 'positive' | 'notice' | 'live' | 'metric' | 'gray' | 'red' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver' | 'danger' | 'info' | 'neutral' | The variant changes the background color of the badge. |
fillStyle | 'outline' | 'bold' | 'subtle' | 'bold' | The fill of the badge. |
overflowMode | 'wrap' | 'truncate' | 'wrap' | Sets the text behavior for the contents. |
styles | StyleString | (() => StyleString | undefined) | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
class | string | — | Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. |
slot | string | — | Not yet documented |
ref | HTMLSpanElement | ((el: HTMLSpanElement) => void) | { current?: HTMLSpanElement | null | undefined; } | — | Not yet documented |
Declared in packages/viviana-ui/src/badge/index.tsx.
Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.