Box
The base style/spacing primitive. All spacing props accept a
SpaceValue ('xxs'–'xxl', a px number, or any CSS length).
Use as to render a different element.
padding md
padding xl, border
section, paddingX lg / paddingY xs
import { Box } from '@gg-software/ui';
<Box padding="md" background="var(--color-primary-bg)" radius="var(--radius)">
padding md
</Box>
<Box padding="xl" border background="var(--color-surface)" radius="var(--radius-lg)">
padding xl, border
</Box>
<Box as="section" paddingX="lg" paddingY="xs" background="var(--color-fill-tertiary)">
section, paddingX lg / paddingY xs
</Box>border accepts true (default 1px token border) or a raw CSS border string.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | content rendered inside the component |
as | ElementType | — | |
padding | SpaceValue | — | |
paddingX | SpaceValue | — | |
paddingY | SpaceValue | — | |
margin | SpaceValue | — | |
marginX | SpaceValue | — | |
marginY | SpaceValue | — | |
background | string | — | |
radius | string | — | |
border | string | boolean | — | |
width | string | number | — | |
height | string | number | — | |
className | string | — | |
style | CSSProperties | — |
* required · generated from packages/ui/src/layout/Box/Box.tsx