> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Sizing presets

> One knob that reshapes chrome and layout density across every element.

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

```javascript theme={null}
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.

```javascript theme={null}
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:

```javascript theme={null}
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.

## See also

* [Token reference](/payment-elements/theming/token-reference)
* [Element-scoped overrides](/payment-elements/theming/element-scoped-overrides)