Divider

A thin line separating two pieces of content.

Row one

Row two

<template>
  <Divider />
</template>

Props

Name	Type	Default
variant	"primary" \| "secondary"	"secondary"
...props	USeparator props (orientation, as, decorative, ...)	—

Usage

Examples

Vertical

`orientation` passes through to USeparator unchanged — pair it with an explicit height, since a vertical divider has no content of its own to size against.

<template>
  <div class="flex items-center gap-3">
    <Button variant="ghost" size="xs">Copy</Button>
    <Divider orientation="vertical" class="h-4" />
    <Button variant="ghost" size="xs">Share</Button>
  </div>
</template>

Primary variant

Matches a container already bordered in stroke-primary, e.g. sitting inside a Card.

Section one

Section two

<template>
  <Card>
    <div class="flex flex-col gap-4">
      <span>Section one</span>
      <Divider variant="primary" />
      <span>Section two</span>
    </div>
  </Card>
</template>