Leaf UI
  • English

      • Divider

      Separate content, paragraphs or actions.

      Basic usage

      Live previewBasic usage

      Project details

      EditShareArchive
      basic.tsx
      import { Divider } from '@sudden3/leaf-ui';

export function DividerBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <p>Project details</p>
      <Divider>Settings</Divider>
      <Divider align="start" dashed>
        More content
      </Divider>
      <div>
        Edit
        <Divider type="vertical" />
        Share
        <Divider type="vertical" dashed />
        Archive
      </div>
    </div>
  );
}

      Divider API

      PropertyTypeDefaultDescription
      type'horizontal' | 'vertical''horizontal'Orientation
      align'start' | 'center' | 'end''center'Text alignment
      dashedbooleanfalseDashed line
      childrenReactNode—Horizontal divider text

      Types

      Import the exported types when defining props or building item lists.

      import type { DividerProps } from '@sudden3/leaf-ui';

      Usage notes

      Use vertical dividers between inline content.