Display@knitui/components
Badge
Badge is a compact status label composed from Box + Text. Accent color comes from the active theme prop (palette ramp). variant picks the fill style, size sets the metrics, radius controls rounding (pill by default), circle makes a square-aspect badge for single glyphs, and leftSection/rightSection accept any adornment.
import { Badge } from "@knitui/components";Playground
Loading playground…
<Badge
variant="light"
size="md"
circle={false}
fullWidth={false}
>
Badge
</Badge>Examples
Variants
Every visual variant side by side, at the default size.
Loading example…
Sizes
The seven token sizes, from xxs to xxl, using the default light variant.
Loading example…
Shadows
Elevation via the shared shadow ladder — inherited from Box, so every component accepts it; no shadow unless set.
Loading example…
With Sections
Left and right sections hold icons or any adornment alongside the label.
Loading example…
Circle
Circle mode — equal width and height for a single glyph or short number.
Loading example…
Dot Variant
The dot variant prepends a colored indicator dot — no leftSection needed.
Loading example…
Themed
The palette ramp follows the active theme — same component, different accent.
Loading example…
Matrix
Full variant × size matrix for visual regression.
Loading example…
Gradient
The gradient variant fills the badge with a linear gradient. With no gradient prop it follows the theme ramp; otherwise it accepts a two-color shorthand, $colorN tokens, or a multi-step stops list. Text renders white.
Loading example…
Gradient Presets
A set of curated multi-color gradient presets.
Loading example…
Gradient Themed
The themed gradient (no gradient prop) derives its ramp from the active theme.
Loading example…
Gradient Sizes
The Sunset gradient across the full token size scale.
Loading example…
Styles
Per-slot styles targets individual parts — here the root frame and text label.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled system | boolean | undefined | — | |
fullWidth system | boolean | undefined | false | Stretches the badge to the full width of its container. |
gradient system | GradientValue | undefined | — | Gradient fill for variant='gradient' — { from, to, deg } or { stops, deg }. |
leftSection | ReactNode | — | |
radius system | string | number | undefinedunset · xs · sm · md · lg · xl · full | — | Border radius override — defaults to pill (999). |
rightSection | ReactNode | — | |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | |
size system | number | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefinedxxs · xs · sm · md · lg · xl · xxl | md | Controls height, horizontal padding and font size. |
styles system | SlotStyles<BadgeStyles> | undefined | — | Per-slot style sugar — props spread onto the matching styled part. |
theme system | ThemeName | null | undefinedunset · blue · red · green · yellow · pink · gray | — | Active theme accent — recolors the badge via the palette ramp. |
variant system | "light" | "outline" | "white" | "transparent" | "default" | "dot" | "filled" | "gradient" | undefinedfilled · light · outline · dot · transparent · white · default · gradient | light | Visual variant — how the theme color ramp is applied. |
Style slots
Every part of Badge can be styled through the styles prop. Explicit props on the component always win over slot styles.
| Slot | Usage |
|---|---|
dot | styles={{ dot: { … } }} |
root | styles={{ root: { … } }} |
text | styles={{ text: { … } }} |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiElement> | undefined |
Plus 499 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.