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 >
Content above
Content below
< 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 >
Content left
Content right
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 >
Content above large Divider
Content above medium Divider Content above small Divider
Name Type Default Description size
'S'
| 'M'
| 'L'
'L'
How thick the Divider should be. orientation
'horizontal'
The axis the Divider should align with.
LayoutName 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.
SpacingName Type Description margin
< >
The margin for all four sides of the element. See MDN . marginTop
< >
The margin for the top side of the element. See MDN . marginBottom
< >
The margin for the bottom side of the element. See MDN . marginStart
< >
The margin for the logical start side of the element, depending on layout direction. See MDN . marginEnd
< >
The margin for the logical end side of an element, depending on layout direction. See MDN . marginX
< >
The margin for both the left and right sides of the element. See MDN . marginY
< >
The margin for both the top and bottom sides of the element. See MDN .
SizingName Type Description width
< >
The width of the element. See MDN . minWidth
< >
The minimum width of the element. See MDN . maxWidth
< >
The maximum width of the element. See MDN . height
< >
The height of the element. See MDN . minHeight
< >
The minimum height of the element. See MDN . maxHeight
< >
The maximum height of the element. See MDN .
PositioningName Type Description position
< 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' >
Specifies how the element is positioned. See MDN . top
< >
The top position for the element. See MDN . bottom
< >
The bottom position for the element. See MDN . left
< >
The left position for the element. See MDN . Consider using start
instead for RTL support. right
< >
The right position for the element. See MDN . Consider using start
instead for RTL support. start
< >
The logical start position for the element, depending on layout direction. See MDN . end
< >
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.
AccessibilityName Type 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.
AdvancedName Type 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.