Sizing presets

appearance.size is a meta-preset that reshapes every element’s chrome and layout density in a single knob.

new Overflow('live_pub_...', {
  appearance: { size: 'compact' }, // 'compact' | 'normal' (default) | 'large'
});

What the preset controls

Token	`compact`	`normal` (default)	`large`
`inputHeight`	`30px`	`34px`	`44px`
`inputPaddingX`	`10px`	`12px`	`14px`
`inputFontSize`	`13px`	`14px`	`16px`
`spacingUnit`	`3px`	`4px`	`6px`
`buttonFontSize`	`14px`	`16px`	`18px`

buttonHeight follows the resolved inputHeight by default, so submit buttons scale with the preset automatically. Border width, line height, and label font size stay constant across presets. Override them individually via variables when needed.

Preset with token overrides

Presets and tokens compose: presets pre-seed defaults; explicit tokens win.

new Overflow('live_pub_...', {
  appearance: {
    size: 'compact',
    variables: {
      inputHeight: '32px', // wins over compact's 30px default
    },
  },
});

Per-element override

An element-level appearance.size replaces the instance-level size on that element only:

overflow.card().mount('#card');   // inherits instance size

overflow.bank({
  appearance: { size: 'compact' }, // uses compact regardless of instance
}).mount('#bank');

The size class swaps atomically. There is no in-between state; a runtime update({ appearance: { size: 'large' } }) resizes the element without remount.

Preset defaults, not a cap

Explicit tokens always win over the preset’s implicit defaults. The preset is a shortcut, not a lock-in. Reach for the preset when you want every input on the page to scale together; reach for variables when you want to tune a single dimension.

Get started

Elements

Options

Events

Theming

Guides

What the preset controls

Preset with token overrides

Per-element override

Preset defaults, not a cap

See also

​What the preset controls

​Preset with token overrides

​Per-element override

​Preset defaults, not a cap

​See also

What the preset controls

Preset with token overrides

Per-element override

Preset defaults, not a cap

See also