Components
Separator
A visual or semantic divider between content sections.
A horizontal or vertical dividing line. When decorative is false (default), it renders as role="separator" with an appropriate aria-orientation attribute.
Usage
Horizontal separator
Content below the separator.
HomeAboutContact
Examples
Vertical separator
<template>
<div class="flex items-center gap-4">
<span>Home</span>
<Separator orientation="vertical" class="h-4" />
<span>About</span>
</div>
</template>
Decorative
Use decorative when the separator is purely visual and carries no semantic meaning.
<template>
<Separator :decorative="true" class="my-divider" />
</template>
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Direction of the separator line. |
decorative | boolean | false | When true, renders as role="none" (purely visual). |
as | string | "div" | Root element tag. |