About NebulaKit
Components that come in several sizes take a scale prop with five T-shirt sizes: xs, sm, md, lg and xl. The names are the same everywhere, so md always means the middle size of that component. A single scale value sizes the whole component at once, its height, padding, text, icons and gaps move together and stay in proportion.
Example
import { Button, Input, NEB_LENGTH, Stack } from '@nebula-kit/core' export const Search = () => ( // same scale, same height, so the input and button line up <Stack direction="horizontal" gap={NEB_LENGTH.px_008}> <Input scale="sm" placeholder="Search" /> <Button scale="sm">Go</Button> </Stack>) export const Submit = () => ( // scale is responsive, larger from the lg breakpoint up <Button scale={{ base: 'md', lg: 'lg' }}>Submit</Button>)Scale
Controls of the same size share these values, so they have the same height and line up when you place them side by side.
| Scale | Height | Padding | Font size | Icon size | Gap |
|---|---|---|---|---|---|
xs | 32px | 10px | 13px | 11px | 5px |
sm | 38px | 13px | 14px | 12px | 6px |
md | 44px | 16px | 15px | 13px | 7px |
lg | 50px | 19px | 16px | 14px | 8px |
xl | 56px | 22px | 17px | 15px | 9px |