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.

installyarn add @adobe/react-spectrum
added3.0.0
usageimport {Divider} from '@adobe/react-spectrum'

Example#


Horizontal#

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

Vertical#

<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 leftContent right

Size#

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

Props#


NameTypeDefaultDescription
size'S''M''L''L'How thick the Divider should be.
orientation'horizontal'The axis the Divider should align with.
Layout
NameTypeDefaultDescription
flex<stringnumberboolean>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<numberstring>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.
slotstring'divider'A slot to place the divider in.
Spacing
NameTypeDescription
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.
Sizing
NameTypeDescription
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.
Positioning
NameTypeDescription
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.
Accessibility
NameTypeDescription
idstringThe element's unique identifier. See MDN.
aria-labelstringDefines a string value that labels the current element.
aria-labelledbystringIdentifies the element (or elements) that labels the current element.
aria-describedbystringIdentifies the element (or elements) that describes the object.
aria-detailsstringIdentifies the element (or elements) that provide a detailed, extended description for the object.
Advanced
NameTypeDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets inline style for the element. Only use as a last resort. Use style props instead.