Skip to main content

Box

Used as a blanket filler to surround any number of components with color or create a box of predefined size.

github
View source code
figma
View design
import { Box } from '@uhg-abyss/web/ui/Box';
    () => {
      return <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'.

    Color contrast

    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'. The default value is 'start'.

    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​

    NameTypeDefaultRequiredDescription
    align
    'start' | 'center' | 'end' | undefined
    		--
    The horizontal alignment of children inside the box
    children
    React.ReactNode | undefined
    		--
    The contents of the box component
    color
    string | undefined
    '$web.semantic.color.surface.container.tertiary'
    		-
    The color of the box
    height
    string | number | undefined
    '100%'
    		-
    The height of the box
    padding
    string | number | undefined
    '$web.semantic.spacing.scale.lg'
    		-
    Padding between the box and the elements it contains
    width
    string | number | undefined
    '100%'
    		-
    The width of the box

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

    Abyss.d.ts

    Box Classes​

    Class NameDescription
    .abyss-box-rootBox root element
    Table of Contents