Sizes and radii

One size scale for every control

Each entry in sizes describes one step of the control scale:

sizes: {
  xs: { height: '1.75rem', paddingX: '0.625rem', fontSize: '0.75rem',   iconSize: '0.75rem' },
  sm: { height: '2rem',    paddingX: '0.75rem',  fontSize: '0.8125rem', iconSize: '0.875rem' },
  md: { height: '2.5rem',  paddingX: '1rem',     fontSize: '0.875rem',  iconSize: '1rem' },
  lg: { height: '3rem',    paddingX: '1.25rem',  fontSize: '1rem',      iconSize: '1.25rem' },
  xl: { height: '3.5rem',  paddingX: '1.5rem',   fontSize: '1.125rem',  iconSize: '1.5rem' },
},

Buttons, icon buttons, inputs, selects, comboboxes, tabs, menus, checkboxes, radios, switches and badges all read the same entry, so controls of the same size always line up:

Field	Used for
`height`	the fixed height of buttons, inputs, selects and tabs
`paddingX`	horizontal padding
`fontSize`	text inside the control
`iconSize`	`<svg>` icons inside controls, and the box of checkboxes, radios and switches

Use rem, so controls scale with the user’s browser font size. Keep px for borders and focus rings.

defaults.size is the size every control uses when size is omitted. Set it to sm and the whole app becomes compact.

Sizes and spacing are different scales

sizes is for controls: how big a button or input is to click and read. spacing is for layout: the padding inside cards and dialogs (defaults.padding) and the gap between items (defaults.gap). They’re separate so a dense app can have small controls with generous spacing, or the other way around. Their keys are independent too.

A theme must define every size your app uses

If <Button size="xl"> is rendered with a theme that has no xl, the button gets the class yarcl-size-xl but no CSS for it, so it collapses. With a config, that’s a type error. For themes switched at runtime, check them against a shared contract (see switching themes).

Radius scale

radii is an open group. The convention is to name the steps like your sizes, plus two exceptions:

radii: {
  square: '0',
  sm: '0.25rem',
  md: '0.375rem',
  lg: '0.5rem',
  xl: '0.75rem',
  rounded: '9999px',
},

defaults.radius is the radius every component uses when radius is omitted: buttons, inputs, cards, dialogs, badges, alerts. The library default is md.

defaults: { radius: 'md' },                  // every component
components: { Button: { radius: 'square' } } // except buttons

See component defaults for per-component overrides.

modalSizes is a separate open group for the widths of dialogs and drawers. It’s separate from sizes because the two scales measure different things: control sizes set a button’s height, modal sizes set a panel’s width.

modalSizes: {
  sm: '24rem',
  md: '32rem',
  lg: '48rem',
  xl: '64rem',
  full: '100vw',
},
defaults: { modalSize: 'md' },
components: { Drawer: { size: 'sm' } },

Widths are capped to the screen, so full leaves a small margin around dialogs.

Matching radius to size (opt-in)

Set defaults.radius: 'size' to give each control the radius named like its size: an lg button gets radii.lg, an sm input gets radii.sm. Components without a size use the radius of defaults.size. size is reserved and can’t be used as a radius key.