Sizing
Foundation layout steps, control heights, and icon dimensions.
Component dimensions alias Foundation size steps through componentSizes in @refineui/tokens. Do not hardcode control heights or icon boxes in React styles.
What to use
Section titled “What to use”| Layer | Purpose |
|---|---|
| foundationSizes | Global size steps (source of truth in Foundation) |
| componentSizes | Web Kit dimension aliases → Foundation keys |
| iconSizes | Glyph sizes in px (xxsmall … xxlarge) |
Icon sizes
Section titled “Icon sizes”| Token | px |
|---|---|
| xxsmall | 12 |
| xsmall | 16 |
| small | 20 |
| medium | 24 |
| large | 28 |
| xlarge | 32 |
| xxlarge | 48 |
Examples
Section titled “Examples”Control heights (button, input) and overlay widths resolve as CSS variables such as --refineui-size-button-min-height-md and --refineui-size-dialog-max-width. Prefer component props (size="md") over reading those vars in product CSS unless you are composing a custom chrome.
import { iconSizes } from "@refineui/tokens";import { WebIcon } from "@refineui/react";
<WebIcon name="search" size={iconSizes.small} />