import { Box } from '@uhg-abyss/mobile';() => { return <Box width={100}></Box>;};Basic Usage
Box is a container component that can be used to organize or structure a screen. Use height and width to control the size.
Children
Box takes children of type node.
Color
The color prop sets the background color. The default is set to $semantic.color.surface.interactive.standards.rest.quaternary.
Padding
The padding prop sets the padding in all directions. The default is set to $md.
Search Message Example
A simple component that displays a message with a link to search for a different term. Designopens in a new window
Box Props
| Name | Type | Default | Description |
|---|---|---|---|
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | Children of the Box component | |
color | Color | undefined | '$semantic.color.surface.interactive.standards.rest.quaternary' | Set color of Box |
height | Size | undefined | Set height of Box | |
padding | Space | undefined | '$semantic.spacing.lg' | Set padding of Box |
width | Size | undefined | Set width of Box |
Box Classes
| Class Name | Description |
|---|---|
| abyss-box-root | Box root element |