Box
Box is a layout component that is often used as a building block for other components. It sets padding, border, etc. with design tokens.
Read more about this component in the Aksel documentation.
Properties
| Property | Description | Default | Control | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Properties | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| as | HTML element to render as. unknown | "div" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background | Background color. Accepts a color token. unknown unknown | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| borderColor | Border color. Accepts a color token. unknown | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| borderRadius | Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints. unknown | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| borderWidth | Border-width. If this is not set there will be no border. unknown | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| padding | Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. unknown | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| paddingBlock | Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. unknown | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| paddingInline | Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. unknown | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| shadow | Shadow on box. Accepts a shadow token. unknown | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Snippets | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| children | Content | - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Properties included from: HTMLAttributes<HTMLDivElement>, Omit<BaseBoxProps, keyof HTMLAnchorAttributes>, HTMLAnchorAttributes