Loading...
Usage
import { reach, floor } from '@luxfi/ui/material'<Button height={reach.plain}>Swap</Button>Rungs
| Rung | Px | Stands under |
|---|---|---|
reach.mark | 20 | A glyph that is not a target — a keycap, a badge, a mark beside a word |
reach.dense | 28 | Inline with running text: a link, a chip, a filter, the line you open a fold by |
reach.card | 32 | A control belonging to a card — its tab row, the cog beside it |
reach.band | 34 | A control belonging to the application header rather than a screen |
reach.plain | 40 | The ordinary control: a button, a picker, a field, a row in a list |
reach.lead | 48 | A control that stands on its own rather than in a row |
reach.major | 52 | The one action a screen is for |
reach.tile | 88 | A control that is a tile: a drawing over a word, the whole square the target |
Reach is the union of the eight values. floor is 24 — the least a target may
be, which is not a rung: a mark is drawn at reach.mark and pressed at floor.