Divider

The Divider component from Superset's UI library.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <>
      <p>Horizontal divider with title (orientationMargin applies here):</p>
      <Divider orientation="left" orientationMargin={0}>Left Title</Divider>
      <Divider orientation="right" orientationMargin={50}>Right Title</Divider>
      <Divider>Center Title</Divider>
      <p>Vertical divider (use container gap for spacing):</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
        <span>Link</span>
        <Divider type="vertical" />
        <span>Link</span>
        <Divider type="vertical" />
        <span>Link</span>
      </div>
    </>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
dashed	boolean	false	Whether line is dashed (deprecated, use variant).
variant	string	"solid"	Line style of the divider.
orientation	string	"center"	Position of title inside divider.
orientationMargin	string	""	Margin from divider edge to title.
plain	boolean	true	Use plain style without bold title.
type	string	"horizontal"	Direction of the divider.

Import

import { Divider } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.