Defaults
Global defaults
Section titled “Global defaults”defaults holds the value every component uses when a prop is omitted. Each entry must be a key of its group.
| Key | Used by |
|---|---|
size |
every sized control |
radius |
every component with a radius |
color |
every component with a color |
variant |
buttons, selected toggle items |
softVariant |
badges, alerts, unselected toggle items |
errorColor |
invalid fields and error messages |
textStyle |
Text |
labelStyle, helperStyle |
form labels, helper and error text |
gap, padding |
layout components, cards, overlays |
floatingShadow |
popovers, menus, dialogs, toasts |
density |
Table |
modalSize |
Dialog, Drawer |
Per-component defaults
Section titled “Per-component defaults”components sets defaults for one component, before the global defaults apply:
defaults: { radius: 'md', size: 'md', … },components: { Button: { radius: 'square' }, // buttons are always sharp IconButton: { radius: 'rounded' }, // icon buttons are circles Card: { radius: 'lg', padding: 'lg' }, Stack: { gap: 'sm' },},Everything is checked:
- component names must be real (
Butonis an error) - each component only accepts the props it has (
Card: { variant }is an error) - values must be keys of your config (
radius: 'pill'is an error when there’s nopill)
Resolution order
Section titled “Resolution order”For any token prop, the first value found wins:
- the prop on the element:
<Button radius="lg"> - an enclosing group:
ButtonGroup,ToggleGrouporRadioGrouppassingsize,color,variantorradiusdown components.<Name>in the configdefaultsin the config
Components and the props they accept
Section titled “Components and the props they accept”| Component | Props |
|---|---|
Button, IconButton |
size, radius, color, variant |
ToggleGroup |
size, radius, color, variant, selectedVariant |
Input, Textarea, Select, Combobox |
size, radius, color |
Checkbox, Radio, Switch |
size, color |
Badge |
size, radius, color, variant |
Alert |
radius, color, variant |
Card |
radius, padding, shadow |
Popover, HoverCard |
radius, padding |
Dialog |
radius, size (from modalSizes) |
Drawer |
size (from modalSizes) |
Menu |
size |
Tabs |
size, color |
Table |
density |
Stack, Inline |
gap |
Text |
textStyle, color |
Link, Toast |
color |
Spinner |
size, color |
Skeleton |
size, radius |