Divider

A divider is a thin line that groups content in lists and layouts.

import {QDivider} from "@qui/react"

Examples

Showcase

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

import {ReactNode} from "react"

import {QDivider} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <div className="flex flex-col gap-4 px-8">
      <span className="q-body-m">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </span>
      <QDivider />
      <span className="q-body-m">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </span>
    </div>
  )
}

Orientation

Switch the layout to vertical using the orientation input.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

import {ReactNode} from "react"

import {QDivider} from "@qui/react"

export default function Orientation(): ReactNode {
  return (
    <div className="flex gap-4 px-8">
      <span className="q-body-m">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </span>
      <QDivider orientation="vertical" />
      <span className="q-body-m">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </span>
    </div>
  )
}

Spacing

Apply additional spacing between the divider and its sibling elements using the spacing input.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

import {ReactNode} from "react"

import {QDivider} from "@qui/react"

export default function Spacing(): ReactNode {
  return (
    <div className="flex flex-col gap-4 px-8">
      <div className="flex gap-4">
        <span className="q-body-m">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
        <QDivider orientation="vertical" spacingAfter={16} spacingBefore={16} />
        <span className="q-body-m">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
      </div>
      <QDivider spacingAfter={16} spacingBefore={16} />
      <span className="q-body-m">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </span>
    </div>
  )
}

Name & Description	Option(s)	Default
accent Customize the accent for ideal contrast. Use secondary when the divider is placed on an inverted contrast background.	\| 'primary' \| 'secondary'	'primary'
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
color Color of the divider.	\| 'subtle' \| 'default' \| 'strong' \| 'focus'	'default'
orientation Orientation of the divider.	\| 'horizontal' \| 'vertical'	'horizontal'
spacingAfter Apply additional spacing between the divider and its next element sibling. When orientation is `'horizontal'`, this translates to bottom margin. When orientation is `'vertical'`, this translates to right margin. Numbers are converted to pixels.	\| string \| number	0
spacingBefore Apply additional spacing between the divider and its previous element sibling. When orientation is `'horizontal'`, this translates to top margin. When orientation is `'vertical'`, this translates to left margin. Numbers are converted to pixels.	\| string \| number	0
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties

Apply additional spacing between the divider and its next element sibling. When orientation is 'horizontal', this translates to bottom margin. When orientation is 'vertical', this translates to right margin. Numbers are converted to pixels.

spacingBefore

Type

| string
| number

Default

Description

Apply additional spacing between the divider and its previous element sibling. When orientation is 'horizontal', this translates to top margin. When orientation is 'vertical', this translates to left margin. Numbers are converted to pixels.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

Dialog

Header

Divider

Examples

Showcase

Orientation

Spacing

API

Props