Colors

The color prop

Pass a color scale name to any supporting component. The component resolves it to the appropriate CSS custom properties for the active variant and color scheme.

<Badge color="violet" variant="filled">violet</Badge>
<Badge color="teal"   variant="filled">teal</Badge>
<Badge color="red"    variant="filled">red</Badge>

The default color when none is specified is primary, which resolves to the --dv-color-primary-* tokens. Change the primary color site-wide via CSS — see Theming.

Variants

The variant prop controls how the color is applied. Each variant maps to a different set of semantic color tokens.

filled

Solid background using the scale's -filled token. Best for primary actions.

light

Tinted background using the -light token. Subtle emphasis without strong contrast.

outline

Transparent background with a colored border. Pairs well with filled buttons in a group.

subtle

No background or border at rest; the -light-hover background appears on hover.

default

Uses the surface color tokens — ignores the color prop entirely.

white

Always white background with the scale's -filled color as the text. Intended for use on colored backgrounds.

<Button variant="filled" color="violet">Primary</Button>
<Button variant="light"   color="violet">Secondary</Button>
<Button variant="outline" color="violet">Outline</Button>
<Button variant="subtle"  color="violet">Subtle</Button>
<Button variant="default">Default</Button>
<Button variant="white"   color="violet">White</Button>

Gradient

Button (and a few other components) support a gradient prop that accepts a { from, to, deg? } object. The from and to values are color scale names or any CSS color. The default angle is 135°.

<Button variant="gradient" gradient={{ from: 'violet', to: 'blue' }}>
  violet → blue
</Button>
<Button variant="gradient" gradient={{ from: 'teal', to: 'lime', deg: 90 }}>
  teal → lime
</Button>

Text color — the c style prop

Every component inherits the c style prop, which sets the CSS color property. It accepts scale names, dot-notation shade/variant selectors, semantic aliases, or any raw CSS color.

Scale name (default)

A lowercase scale name resolves to that scale's -light-color token — the accessible text color intended for use on light or tinted backgrounds.

Dot notation — specific shade

Append .N (0–9) to pick an exact palette shade. Shade 0 is lightest, shade 9 is darkest. Use this when the default doesn't provide enough contrast for your background.

<Text c="violet.3">Lighter violet</Text>
<Text c="violet.6">Mid violet</Text>
<Text c="violet.9">Darkest violet</Text>

Dot notation — variant token

Append a variant suffix to reference any of the semantic variant tokens. Useful when you need text to exactly match a component's border or background color.

{/* Match text to an outline badge's border color */}
<Badge color="violet" variant="outline" c="violet.outline">violet</Badge>

{/* White text on a filled background */}
<Text c="violet.filled-color">…</Text>

Semantic aliases

Named aliases for surface, interface, and status tokens. These respond to theme changes and dark mode automatically.

<Text c="dimmed">Secondary text</Text>
<Text c="error">Validation error message</Text>
<Text c="success">Saved successfully</Text>

Raw CSS values

Any value that is not a recognised alias or scale name passes through as-is.

<Text c="#a855f7">Hex</Text>
<Text c="oklch(65% 0.22 300)">oklch</Text>
<Text c="var(--dv-color-violet-5)">CSS variable</Text>

Raw CSS values for the color prop

The color prop accepts any string. Unrecognised values are passed to the underlying CSS variable as-is, letting you use hex codes, CSS variables, or modern color functions. Note: raw values only affect the filled background slot — hover states and borders fall back to the default token.

<Badge color="#a855f7">Hex</Badge>
<Badge color="var(--dv-color-violet-5)">CSS variable</Badge>
<Badge color="oklch(65% 0.22 300)">Modern color</Badge>

Background color — the bg style prop

The bg style prop sets the CSS background property and supports the same dot-notation and semantic aliases as c, with background-appropriate defaults.

Scale name (default)

A plain scale name resolves to the -light token — a tinted background that works well in both light and dark mode.

<Box bg="violet" p="md">Tinted violet background</Box>
<Box bg="teal"   p="md">Tinted teal background</Box>

Dot notation — shade or variant

Same syntax as c — append a shade index or variant token.

<Box bg="violet.filled"     c="violet.filled-color" p="md">Solid filled</Box>
<Box bg="violet.3"          c="violet.9"            p="md">Shade 3</Box>
<Box bg="violet.light-hover" c="violet.light-color" p="md">Hover tint</Box>

Surface & semantic aliases

body and surface are background-specific aliases not available on c. Status tokens resolve to their filled color.

<Box bg="body"    p="md">Page background</Box>
<Box bg="surface" p="md">Panel / sidebar background</Box>
<Box bg="error"   c="bright" p="md">Error state</Box>
<Box bg="success" c="bright" p="md">Success state</Box>

Raw CSS values

Unrecognised values are passed to background directly.

<Box bg="#a855f7"                                     p="md">Hex</Box>
<Box bg="oklch(65% 0.22 300)"                         p="md">oklch</Box>
<Box bg="linear-gradient(135deg, #7950f2, #228be6)"   p="md">Gradient</Box>

Components that accept color

The following components read the color prop:

Semantic status colors

Use the four semantic status tokens for alerts, notifications, and validation states. They map to color scales but can be overridden globally via CSS — see Theming → Semantic status tokens.

<Alert color="red"    variant="light" title="Error">Something went wrong.</Alert>
<Alert color="yellow" variant="light" title="Warning">Proceed with caution.</Alert>
<Alert color="green"  variant="light" title="Success">Operation completed.</Alert>
<Alert color="blue"   variant="light" title="Info">For your information.</Alert>