Separator · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JSeparator } from '@juxtui/ui'

Usage #

<JSeparator />
<JSeparator label="or" />
<JSeparator orientation="vertical" />

Decorative by default (role="none") since most separators are purely visual. Set decorative to false when the separator divides meaningful groups and should be announced.

Variants & examples #

Vertical#

Divides items in a row, e.g. a toolbar or inline action list.

Edit

Duplicate

Delete

<template>
  <div class="flex h-5 items-center gap-3 text-sm text-fg-muted">
    <span>Edit</span>
    <JSeparator orientation="vertical" />
    <span>Duplicate</span>
    <JSeparator orientation="vertical" />
    <span>Delete</span>
  </div>
</template>

With a label#

Pass label, or use the default slot for richer content, e.g. between two sign-in options.

<template>
  <div class="flex w-full max-w-xs flex-col gap-4">
    <JButton variant="outline" block>
      Continue with email
    </JButton>
    <JSeparator label="or" />
    <JButton variant="outline" block>
      Continue with SSO
    </JButton>
  </div>
</template>

API #

Props

Prop	Type	Default	Description
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the rule.
label	`string`	—	Text in the middle of a horizontal separator, e.g. "or". The default slot overrides it.
decorative	`boolean`	`true`	Purely visual (the default). Set to `false` when the separator divides meaningful groups and should be announced.

Slots

Slot	Props	Description
default	—	Custom label content, replacing `label`.

Accessibility #

By default the rule is role="none" and invisible to assistive technology, since it’s decorative.
With decorative set to false, it becomes role="separator" with aria-orientation.