Skip to main content

Layout

Used to layout UI elements horizontally or vertically.

github
View source code
import { Layout } from '@uhg-abyss/web/ui/Layout';

Deprecated

Layout is deprecated and will be removed in a v3 of Abyss. It is in maintenance status and will only receive bug fixes if found. Please migrate to Stack or Group instead.

See the Layout Guide for help choosing between the new layout components.

See the Layout Guide for help choosing between the new layout components.

Layout.Group​

Used to align elements in a row.

      () => {
        return (
          <Layout.Group>
            <Docs.ExampleBox padding="15px">Group 1</Docs.ExampleBox>
            <Docs.ExampleBox>Group 2</Docs.ExampleBox>
            <Docs.ExampleBox padding="5px">Group 3</Docs.ExampleBox>
          </Layout.Group>
        );
      };

      Layout.Stack​

      Used to align elements in a column.

          () => {
            return (
              <Layout.Stack>
                <Docs.ExampleBox padding="15px">Stack Sandbox 1</Docs.ExampleBox>
                <Docs.ExampleBox>Stack Sandbox 2</Docs.ExampleBox>
                <Docs.ExampleBox padding="5px">Stack Sandbox 3</Docs.ExampleBox>
              </Layout.Stack>
            );
          };

          Combine Layout.Group and Layout.Stack​

          Use Stack and Group together to make simple sets of rows and columns

          Layout.Group and Layout.Stack props​

          Space​

          Use the space property to set the spacing for a Group or Stack. The default is set to 8.

          AlignLayout​

          Use the alignLayout property to indicate the horizontal alignment of the items in a Group or Stack.

          • For a Group, the possible options are left, center, right, between, and around; the default is set to left.
          • For a Stack, the possible options are left, center, and right; the default is set to center.

          AlignItems​

          Use the alignItems property to indicate the alignment of the items in a Group or Stack. For a Group the vertical alignment is adjusted, whereas for a Stack the horizontal alignment is adjusted.

          • For a Group, the possible options are top, center, and bottom.
          • For a Stack, the possible options are left, center, and right.

          The default is set to center in both cases.

          Grow​

          Use the grow property indicate whether the grouped components should be stretched to fill the space horizontally. The default is set to false.

          Width​

          Use the optional width property to set the minimum width for each child element.

          Element types​

          To change what type of html elements are displayed, use the props as and childElementsAs. They default to displaying as divs.

          Layout.Group Props​

          Name
          Type
          		DefaultRequiredDescription
          alignItems
          "center" | "top" | "bottom" | undefined
          'center'
          Adjust the vertical alignment of items in the LayoutGroup
          alignLayout
          "left" | "right" | "center" | "between" | "around" | undefined
          'left'
          Set the position of the LayoutGroup
          as
          string | undefined
          Determine what type of html element the LayoutGroup container will render
          childElementsAs
          string | undefined
          Determine what type of html element the LayoutGroup elements will render
          children
          string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined
          The element the LayoutGroup wraps
          className
          string | undefined
          CSS class name to apply to each element within the component
          css
          CSSProperties | Partial<Record<"abyss-layout-group", 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.
          grow
          boolean | undefined
          false
          If true, distribute all space evenly between child elements
          hiddenFrom
          Breakpoint | undefined
          When defined, the component is hidden once the screen width reaches the specified breakpoint.
          slotProps
          Partial<Record<string, SlotPropsValue<string>>> | undefined
          Props to pass to individual internal slots of the component, keyed by the slot name
          (e.g. 'button-root'). Supports className, css, style, aria-*, data-*,
          data-testid, and nested slotProps for child Abyss components.
          See slotProps for more information
          space
          number | undefined
          8
          Distance between elements in the LayoutGroup
          visibleFrom
          Breakpoint | undefined
          When defined, the component is hidden until the screen width reaches the specified breakpoint.
          width
          string | number | undefined
          Set the width of the LayoutGroup

          Layout.Insert Props​

          Name
          Type
          		DefaultDescription
          after
          ReactNode | ((props: FuncProps) => ReactNode)
          Insert element after children
          before
          ReactNode | ((props: FuncProps) => ReactNode)
          Insert element before children
          children
          string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined
          The element the inserted elements are between
          className
          string | undefined
          CSS class name to apply to each element within the component
          css
          CSSProperties | Partial<Record<"abyss-insert-element-before" | "abyss-insert-element-after" | "abyss-insert-element-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.
          hiddenFrom
          Breakpoint | undefined
          When defined, the component is hidden once the screen width reaches the specified breakpoint.
          padding
          string | number | undefined
          '$xs'
          The space between the inserted element and children
          slotProps
          Partial<Record<string, SlotPropsValue<string>>> | undefined
          Props to pass to individual internal slots of the component, keyed by the slot name
          (e.g. 'button-root'). Supports className, css, style, aria-*, data-*,
          data-testid, and nested slotProps for child Abyss components.
          See slotProps for more information
          visibleFrom
          Breakpoint | undefined
          When defined, the component is hidden until the screen width reaches the specified breakpoint.

          Layout.Space Props​

          Name
          Type
          		DefaultDescription
          className
          string | undefined
          CSS class name to apply to each element within the component
          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.
          hiddenFrom
          Breakpoint | undefined
          When defined, the component is hidden once the screen width reaches the specified breakpoint.
          slotProps
          Partial<Record<string, SlotPropsValue<string>>> | undefined
          Props to pass to individual internal slots of the component, keyed by the slot name
          (e.g. 'button-root'). Supports className, css, style, aria-*, data-*,
          data-testid, and nested slotProps for child Abyss components.
          See slotProps for more information
          space
          string | number | undefined
          16
          The amount of space to place between components
          visibleFrom
          Breakpoint | undefined
          When defined, the component is hidden until the screen width reaches the specified breakpoint.

          Layout.Stack Props​

          Name
          Type
          		DefaultRequiredDescription
          alignItems
          "left" | "right" | "center" | undefined
          'center'
          Adjust the horizontal alignment of items in the LayoutStack
          alignLayout
          "left" | "right" | "center" | undefined
          'left'
          Set the position of the LayoutStack
          as
          string | undefined
          Determine what type of html element the LayoutStack container will render
          childElementsAs
          string | undefined
          Determine what type of html element the LayoutStack elements will render
          children
          string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined
          The element the LayoutStack wraps
          className
          string | undefined
          CSS class name to apply to each element within the component
          css
          CSSProperties | Partial<Record<"abyss-layout-stack", 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.
          grow
          boolean | undefined
          false
          If true , distribute all space evenly between child elements
          hiddenFrom
          Breakpoint | undefined
          When defined, the component is hidden once the screen width reaches the specified breakpoint.
          slotProps
          Partial<Record<string, SlotPropsValue<string>>> | undefined
          Props to pass to individual internal slots of the component, keyed by the slot name
          (e.g. 'button-root'). Supports className, css, style, aria-*, data-*,
          data-testid, and nested slotProps for child Abyss components.
          See slotProps for more information
          space
          number | undefined
          8
          Distance between elements in the LayoutStack
          visibleFrom
          Breakpoint | undefined
          When defined, the component is hidden until the screen width reaches the specified breakpoint.
          width
          string | number | undefined
          Set the width of the LayoutStack

          Layout.Group Classes​

          Class NameDescription
          .abyss-layout-groupLayoutGroup root element

          Layout.Insert Classes​

          Class NameDescription
          .abyss-insert-element-afterInsert element after
          .abyss-insert-element-beforeInsert element before
          .abyss-insert-element-rootInsert element root

          Layout.Stack Classes​

          Class NameDescription
          .abyss-layout-stackLayoutStack root element

          For basic content layout, the normal divs should be sufficient. When using layout for semantic elements such as bulleted (ul) or ordered (ol) lists, be sure to use the as and childElementsAs props to correctly preserve the semantic structure. For example, the only valid children for ul and ol are li. Not doing so introduces semantic and code validation errors often reported in accessibility testing (including automated tools like Deque's Axe).

          Table of Contents