Divider

A divider is a thin line that groups content in lists and layouts. The divider implements the ARIA Separator role.

import {Divider} from "@qualcomm-ui/react/divider"

Examples

Showcase

Brand

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

<div className="text-neutral-primary font-body-md">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</div>

<Divider />

<div className="text-neutral-primary font-body-md">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</div>

Variants

Use variant to change the visual emphasis level of the divider.

Brand

subtle: Low contrast, less visually prominent

normal (default): Standard appearance with balanced visibility

strong: High contrast, maximum visual separation

<span className="text-neutral-primary font-body-md">
  subtle: Low contrast, less visually prominent
</span>
<Divider variant="subtle" />

<span className="text-neutral-primary font-body-md">
  normal (default): Standard appearance with balanced visibility
</span>
<Divider />

<span className="text-neutral-primary font-body-md">
  strong: High contrast, maximum visual separation
</span>
<Divider variant="strong" />

Orientation

By default, a divider has a horizontal orientation. You can change this by setting the orientation prop to vertical.

Brand

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

<span className="text-neutral-primary font-body-md">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</span>

<Divider orientation="vertical" />

<span className="text-neutral-primary font-body-md">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</span>

Focusable

By default, a divider is not focusable. You can change this by setting a tabindex value. Authors can assign aria-label to provide accessible names to dividers.

A focusable divider must expose a value to accessibility tools. Authors must set the "aria-valuenow" attribute.

Brand

By default a divider has no tabindex value assigned and is not focusable.

The following divider has a tabindex of 0, which makes it focusable.

The following divider has a tabindex of -1, which makes it programmatically focusable.

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

<span className="text-neutral-primary font-body-md">
  By default a divider has no tabindex value assigned and is not
  focusable.
</span>
<Divider />
<span className="text-neutral-primary font-body-md">
  The following divider has a tabindex of 0, which makes it focusable.
</span>
<Divider aria-label="Second section" tabIndex={0} />
<span className="text-neutral-primary font-body-md">
  The following divider has a tabindex of -1, which makes it
  programmatically focusable.
</span>
<Divider aria-label="Third section" tabIndex={-1} />
<span className="text-neutral-primary font-body-md">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</span>

Value Text

When the value itself is not sufficient to describe the state of the component, authors can provide a more descriptive text using the valueText prop.

Brand

Section 1

Section 2

Section 3

Section 4

<span className="text-neutral-primary font-body-md">Section 1</span>
<Divider
  aria-valuenow={25}
  aria-valuetext="The value is 25"
  tabIndex={0}
/>
<span className="text-neutral-primary font-body-md">Section 2</span>
<Divider
  aria-valuenow={50}
  aria-valuetext="The value is 50"
  tabIndex={0}
/>
<span className="text-neutral-primary font-body-md">Section 3</span>
<Divider
  aria-valuenow={75}
  aria-valuetext="The value is 75"
  tabIndex={0}
/>
<span className="text-neutral-primary font-body-md">Section 4</span>

API

<Divider>

A divider that separates content with a simple line. Renders a <div> element by default.

Prop	Type	Default
orientation Controls whether the divider renders horizontally or vertically.	\| 'horizontal' \| 'vertical'	'horizontal'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
variant Visual emphasis level of the divider. `subtle`: Low contrast, less visually prominent `normal`: Standard appearance with balanced visibility `strong`: High contrast, maximum visual separation	\| 'subtle' \| 'normal' \| 'strong'	'normal'

orientation

Type

| 'horizontal'
| 'vertical'

Description

Controls whether the divider renders horizontally or vertically.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

variant

Type

| 'subtle'
| 'normal'
| 'strong'

Description

Visual emphasis level of the divider.

subtle: Low contrast, less visually prominent
normal: Standard appearance with balanced visibility
strong: High contrast, maximum visual separation

Attribute / Property	Value
`data-variant`	\| 'subtle' \| 'normal' \| 'strong'

Avatar

Header Bar