Usage

Divider separates groups of content with a thin rule. It can carry a centered label.

<script setup lang="ts">
import { Divider } from '@astryx-vue/core/Divider'
</script>

<template>
  <Divider label="or" />
</template>

Best practices

Guidance	Practices
Do	Use subtle dividers between related content sections and strong dividers for high-contrast boundaries.
Do	Add a label to the divider when sections need a visible category heading.
Don't	Overuse dividers; rely on spacing and layout to separate content when possible.

Examples

Basic

A horizontal rule spans the available width.

Label

or

A label sits in the middle of the rule. The label uses supporting text styling.

Variants

Subtle

Strong

subtle is the default weight. strong uses the emphasized border color.

Vertical

Left

Right

Set orientation to vertical inside a row with a fixed height.

Accessibility

A divider is not interactive, but assistive technology still has to know that it is a separator and which orientation it uses before it can describe the element correctly. The component supplies that semantics on the root element:

• The root element has role="separator", and aria-orientation reports the current orientation.
• When you provide a label, the label text becomes the accessible name through aria-labelledby.

If you want to name the separator with different text, set aria-label. Once aria-label is set, the component uses it as the accessible name and no longer links the label automatically.