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
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | React.ReactNode | undefined | - | - | Children of the Box component |
color | Abyss.Color | undefined | '$semantic.color.surface.interactive.standards.rest.quaternary' | - | Set color of Box |
height | Abyss.Size | undefined | - | - | Set height of Box |
padding | Abyss.Space | undefined | '$semantic.spacing.lg' | - | Set padding of Box |
width | Abyss.Size | undefined | - | - | Set width of Box |
Box Classes
| Class Name | Description |
|---|---|
| abyss-box-root | Box root element |