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. Design
Box Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | Children of the Box component |
| color | string | $semantic.color.surface.interactive.standards.rest.quaternary | Set color of Box |
| height | number | string | 100% | Set height of Box |
| padding | number | string | $semantic.spacing.lg | Set padding of Box |
| width | number | string | 100% | Set width of Box |
Box Classes
| Class Name | Description |
|---|---|
| abyss-box-root | Box root element |