Divider

Dividers can be used to separate content both horizontally and vertically with the vertical flag.

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

Most of the time 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 and integrates it automatically with other View features, like responsive item visibility.

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

Pass children to the Divider to display a text label or a custom component next to the divider lines. Use contentPosition to choose on which side it should be rendered.

<View gap={4}>
  <Divider>or login with other accounts</Divider>
  <Divider contentPosition="start">
    <Badge color="primary" variant="faded">
      Free tier
    </Badge>
  </Divider>
</View>

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" defaultValue="0">
    <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 }} />