Divider Dividers bring clarity to a layout by grouping and dividing content in close proximity.
They can also be used to establish rhythm and hierarchy.
View guidelines
< Flex direction = "column" gap = "size-125" >
< Text > Content above< / Text >
< Divider / >
< Text > Content below< / Text >
< / Flex > < Flex direction = "column" gap = "size-125" >
< Text > Content above< / Text >
< Divider / >
< Text > Content below< / Text >
< / Flex > < Flex
direction = "column"
gap = "size-125" >
< Text >
Content above
< / Text >
< Divider / >
< Text >
Content below
< / Text >
< / Flex >
< Flex gap = "size-125" >
< Text > Content left< / Text >
< Divider orientation = "vertical" / >
< Text > Content right< / Text >
< / Flex > < Flex gap = "size-125" >
< Text > Content left< / Text >
< Divider orientation = "vertical" / >
< Text > Content right< / Text >
< / Flex > < Flex gap = "size-125" >
< Text >
Content left
< / Text >
< Divider orientation = "vertical" / >
< Text >
Content right
< / Text >
< / Flex >
View guidelines
< Flex direction = "column" gap = "size-125" >
< Text > Content above large Divider< / Text >
< Divider size = "L" / >
< Text > Content above medium Divider< / Text >
< Divider size = "M" / >
< Text > Content above small Divider< / Text >
< Divider size = "S" / >
< / Flex > < Flex direction = "column" gap = "size-125" >
< Text > Content above large Divider< / Text >
< Divider size = "L" / >
< Text > Content above medium Divider< / Text >
< Divider size = "M" / >
< Text > Content above small Divider< / Text >
< Divider size = "S" / >
< / Flex > < Flex
direction = "column"
gap = "size-125" >
< Text >
Content above large
Divider
< / Text >
< Divider size = "L" / >
< Text >
Content above
medium Divider
< / Text >
< Divider size = "M" / >
< Text >
Content above small
Divider
< / Text >
< Divider size = "S" / >
< / Flex >
Name Type Default Description size 'S'
| 'M'
| 'L' 'L' How thick the Divider should be. orientation Orientation 'horizontal' The axis the Divider should align with.
Name Type Default Description flex string
| number
| boolean — When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN . flexGrow number — When used in a flex layout, specifies how the element will grow to fit the space available. See MDN . flexShrink number — When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN . flexBasis number | string — When used in a flex layout, specifies the initial main size of the element. See MDN . alignSelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'center'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'stretch' — Overrides the alignItems property of a flex or grid container. See MDN . justifySelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' — Specifies how the element is justified inside a flex or grid container. See MDN . order number — The layout order for the element within a flex or grid container. See MDN . gridArea string — When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN . gridColumn string — When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN . gridRow string — When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN . gridColumnStart string — When used in a grid layout, specifies the starting column to span within the grid. See MDN . gridColumnEnd string — When used in a grid layout, specifies the ending column to span within the grid. See MDN . gridRowStart string — When used in a grid layout, specifies the starting row to span within the grid. See MDN . gridRowEnd string — When used in a grid layout, specifies the ending row to span within the grid. See MDN . slot string 'divider' A slot to place the divider in.
Name Type Default Description margin DimensionValue — The margin for all four sides of the element. See MDN . marginTop DimensionValue — The margin for the top side of the element. See MDN . marginBottom DimensionValue — The margin for the bottom side of the element. See MDN . marginStart DimensionValue — The margin for the logical start side of the element, depending on layout direction. See MDN . marginEnd DimensionValue — The margin for the logical end side of an element, depending on layout direction. See MDN . marginX DimensionValue — The margin for both the left and right sides of the element. See MDN . marginY DimensionValue — The margin for both the top and bottom sides of the element. See MDN .
Name Type Default Description position 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' — Specifies how the element is positioned. See MDN . top DimensionValue — The top position for the element. See MDN . bottom DimensionValue — The bottom position for the element. See MDN . left DimensionValue — The left position for the element. See MDN . Consider using start instead for RTL support. right DimensionValue — The right position for the element. See MDN . Consider using start instead for RTL support. start DimensionValue — The logical start position for the element, depending on layout direction. See MDN . end DimensionValue — The logical end position for the element, depending on layout direction. See MDN . zIndex number — The stacking order for the element. See MDN . isHidden boolean — Hides the element.
Name Type Default Description id string — The element's unique identifier. See MDN . aria-label string — Defines a string value that labels the current element. aria-labelledby string — Identifies the element (or elements) that labels the current element. aria-describedby string — Identifies the element (or elements) that describes the object. aria-details string — Identifies the element (or elements) that provide a detailed, extended description for the object.
Name Type Default Description UNSAFE_className string — Sets the CSS className for the element. Only use as a last resort . Use style props instead. UNSAFE_style CSSProperties — Sets inline style for the element. Only use as a last resort . Use style props instead.