import { Box } from '@uhg-abyss/web/ui/Box';

children

color

padding

height

width

align

<Box>Box Sandbox</Box>

Padding

Use the padding prop to adjust the amount of padding around the contents of the Box. This prop accepts and valid CSS padding value (px, rem, em, etc.) as well as Abyss spacing tokens. The default value is '$web.semantic.spacing.scale.lg'.

Color

Use the color prop to set the color of the Box. This prop accepts any valid CSS color identifier (RGB, HSL, named color, etc.) as well as Abyss color tokens. The default value is '$web.semantic.color.surface.container.tertiary'.

Note: Non-text elements must meet the minimum 3:1 contrast ratio as per WCAG 2.1 non-text contrast guidelines. Text colors must meet the minimum 4.5:1 contrast ratio for normal text and 3:1 for large text as per WCAG 2.1 contrast minimum guidelines.

Align

Use the align prop to adjust the alignment of children within the Box. The available options are 'start', 'center', and 'end'.

Width

Use the width prop to adjust the width of the Box. This prop accepts a number (pixels) or a string (percentage, rem, etc.). The default value is '100%'.

Height

Use the height prop to adjust the height of the Box. This prop accepts a number (pixels) or a string (percentage, rem, etc.). The default is set to '100%'.

Example usage

Use Box to surround groups of components and provide a custom colored background.

Box Props

Name	Type	Default	Required	Description
align	"center" | "end" | "start"	-	-	The horizontal alignment of children inside the box
children	React.ReactNode	-	-	The contents of the box component
className	string	-	-	CSS class name to apply to each element within the component
color	string	'$web.semantic.color.surface.container.tertiary'	-	The color of the box
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
height	string | number	'100%'	-	The height of the box
padding	string | number	'$web.semantic.spacing.scale.lg'	-	Padding between the box and the elements it contains
width	string | number	'100%'	-	The width of the box

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

Box.types.ts

Box Classes

Class Name	Description
.abyss-box-root	Box root element