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

<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.

standard

neutral

Open in Playroom

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

<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

Prop	Type	Description
color?	"neutral" \| "standard" \| "fieldHover" \| "primary" \| "primaryHover" \| "primaryActive" \| "secondary" \| "secondaryHover" \| "secondaryActive" \| "accent" \| "accentMuted" \| "caution" \| ... 6 more ... \| "positiveMuted"	The color of the divider Default: `"standard"`
vertical?	boolean	Display the divider vertically
width?	"standard" \| "large"	The width of the divider Default: `"standard"`