title: Divider storybookPath: page-layout-divider--default isExperimentalPackage: false

Used to separate and group content. In most cases use the Stack.

<Divider />

Examples

Width

Defines the “width” of the divider.

<Stack gap="large">
  <Stack gap="small">
    <Text>standard</Text>
    <Divider width="standard" />
  </Stack>
  <Stack gap="small">
    <Text>large</Text>
    <Divider width="large" />
  </Stack>
</Stack>

Color

Defines the “color” of the divider.

<Stack gap="large">
  <Stack gap="small">
    <Text>standard</Text>
    <Divider color="standard" />
  </Stack>
  <Stack gap="small">
    <Text>neutral</Text>
    <Divider color="neutral" />
  </Stack>
</Stack>

Props