Divider

Divider draws a hairline between pieces of content. With a label it starts a section of a form or a dialog.

import { Divider } from '@beyul/sulmu-ui'

Source · Figma

Examples

Horizontal, with and without a label

Above the line

Below the line

Basic info

A labelled divider starts a section of a form.

import { Divider, Stack, Text } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack style={{ maxWidth: 480 }}>
      <Text textStyle="bodyS">Above the line</Text>
      <Divider />
      <Text textStyle="bodyS">Below the line</Text>
      <Divider label="Basic info" />
      <Text textStyle="bodyS">A labelled divider starts a section of a form.</Text>
    </Stack>
  )
}

Vertical

A vertical divider takes the height of its container.

3,928 Users

Invite User

import { Divider, Flex } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={3} align="center" style={{ height: 24 }}>
      3,928 Users
      <Divider orientation="vertical" />
      Invite User
    </Flex>
  )
}

Props

Prop	Type	Default	Description
label	ReactNode	-	Section name shown before the line, e.g. "Basic info". Rendered uppercase.
orientation	"horizontal" | "vertical"	horizontal

Accessibility

• Without a label it has role="separator" and the matching aria-orientation.
• With a label it is a visual heading only. The label is rendered uppercase.