Divider

You can use the View utility divided property whenever you need to separate a group of items. It uses the Divider component under the hood.

<View divided gap={3}>
  <View.Item>Item 1</View.Item>
  <View.Item>Item 2</View.Item>
</View>

Dividers can be used to separate content horizontally and vertically.

<>
  Item 1
  <Divider />
  Item 2
</>

Vertical dividers take the full height of their parent. This property is responsive, which means you can use an object syntax to define its behavior for different viewports: vertical={{ s: true, l: false }}.

<div style={{ height: 100 }}>
  Item 1
  <Divider vertical />
  Item 2
</div>

Divider renders a line that takes 1px of space. You can disable this behavior with the blank property. That can make it easier to use components like borderless Tabs where Divider overlaps with the component content.

<>
  <Tabs variant="borderless">
    <Tabs.List>
      <Tabs.Item value="0">List view</Tabs.Item>
      <Tabs.Item value="1">Map view</Tabs.Item>
    </Tabs.List>
  </Tabs>
  <Divider blank />
</>