Divider

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

import {DividerDirective} from "@qualcomm-ui/angular/divider"

Examples

Showcase

Brand

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

<div class="flex flex-col gap-4 px-8">
  <span class="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>
  <div q-divider></div>
  <span class="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>
</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

<div class="flex flex-col gap-4 px-8">
  <span class="text-neutral-primary font-body-md">
    subtle: Low contrast, less visually prominent
  </span>
  <div q-divider variant="subtle"></div>
  <span class="text-neutral-primary font-body-md">
    normal (default): Standard appearance with balanced visibility
  </span>
  <div q-divider></div>
  <span class="text-neutral-primary font-body-md">
    strong: High contrast, maximum visual separation
  </span>
  <div q-divider variant="strong"></div>
</div>

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.

<div class="flex gap-4 px-8">
  <span class="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>
  <div orientation="vertical" q-divider></div>
  <span class="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>
</div>

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.

<div class="flex flex-col gap-4 px-8">
  <span class="text-neutral-primary font-body-md">
    By default a divider has no tabindex value assigned and is not
    focusable.
  </span>
  <div q-divider></div>
  <span class="text-neutral-primary font-body-md">
    The following divider has a tabindex of 0, which makes it focusable.
  </span>
  <div aria-label="Second section" q-divider tabindex="0"></div>
  <span class="text-neutral-primary font-body-md">
    The following divider has a tabindex of -1, which makes it
    programmatically focusable.
  </span>
  <div aria-label="Third section" q-divider tabindex="-1"></div>
  <span class="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>
</div>

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

<div class="flex w-full flex-1 flex-col items-center gap-4 px-8">
  <span class="text-neutral-primary font-body-md">Section 1</span>
  <div
    aria-valuenow="25"
    aria-valuetext="The value is 25"
    q-divider
    tabindex="0"
  ></div>
  <span class="text-neutral-primary font-body-md">Section 2</span>
  <div
    aria-valuenow="50"
    aria-valuetext="The value is 50"
    q-divider
    tabindex="0"
  ></div>
  <span class="text-neutral-primary font-body-md">Section 3</span>
  <div
    aria-valuenow="75"
    aria-valuetext="The value is 75"
    q-divider
    tabindex="0"
  ></div>
  <span class="text-neutral-primary font-body-md">Section 4</span>
</div>

API

q-divider

Prop	Type	Default
orientation Controls whether the divider renders horizontally or vertically.	\| 'horizontal' \| 'vertical'	'horizontal'
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.

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

Data Grid / Table

Icon