Divider

You can use the View utility's 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 both horizontally and vertically.

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

Divider renders a line that takes up 1px of space. You can disable this behavior with the blank property. This can make it easier to use components like borderless Tabs where the 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 />
</>

Divider supports responsive syntax for the vertical property. Use object syntax to control its value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

For example, this Divider is rendered horizontally on small and medium screens and vertically on large and extra-large screens.

<Divider vertical={{ s: false, l: true }} />