Components

Divider

It's just a line.

Default

This text is placed over

This text is placed under

HTML

This text is placed over
<hr class="ui-divider" />
This text is placed under

Variants

Tonal

Filled

Primary

HTML

Tonal
<hr class="ui-divider ui-border-tonal" />

Filled
<hr class="ui-divider ui-border-filled" />

Primary
<hr class="ui-divider ui-border-primary" />

API

Type	Modifiers	Default	Description
Variant	`.ui-border-tonal`, `.ui-border-filled`, `.ui-border-primary`	-	Visual variant modifiers.

Installation

divider.css

@layer components.root {
  :where(.ui-divider) {
    background-color: var(--border-color);
    block-size: var(--border-size-1);
    margin-block: var(--size-fluid-3);

    /* Border color */
    &.ui-border-filled {
      background-color: var(--surface-filled);
    }

    &.ui-border-primary {
      background-color: var(--primary);
    }

    &.ui-border-tonal {
      background-color: var(--surface-tonal);
    }
  }
}