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 valueopens in a new window (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 identifieropens in a new window (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 guidelinesopens in a new window. 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 guidelinesopens in a new window.

    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​

    Name
    Type
    		DefaultDescription
    align
    "center" | "end" | "start" | undefined
    The horizontal alignment of children inside the box
    children
    string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined
    The contents of the box component
    className
    string | undefined
    CSS class name to apply to each element within the component
    color
    string | undefined
    '$web.semantic.color.surface.container.tertiary'
    The color of the box
    css
    CSSProperties | Partial<Record<"abyss-box-root", CSSProperties>> | undefined
    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 | undefined
    Suffix used to create a unique ID used for automated testing
    See Component Testing for more information
    disableDefaultProviderProps
    boolean | undefined
    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 | undefined
    '100%'
    The height of the box
    hiddenFrom
    Breakpoint | undefined
    When defined, the component is hidden once the screen width reaches the specified breakpoint.
    padding
    string | number | undefined
    '$web.semantic.spacing.scale.lg'
    Padding between the box and the elements it contains
    slotProps
    Partial<Record<"box-root", SlotPropsLeafValue>> | undefined
    visibleFrom
    Breakpoint | undefined
    When defined, the component is hidden until the screen width reaches the specified breakpoint.
    width
    string | number | undefined
    '100%'
    The width of the box

    Box Classes​

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