Kappa / Separator

Project Atlas

Shared workspace for product documentation.

12 members8 projectsUpdated today

<script setup>
import { Separator } from "@dicehub/kappa/components/separator";
</script>

<template>
  <section>
    <strong>Project Atlas</strong>
    <p>Shared workspace for product documentation.</p>
    <Separator />
    <div class="metadata">
      <span>12 members</span>
      <Separator orientation="vertical" />
      <span>8 projects</span>
      <Separator orientation="vertical" />
      <span>Updated today</span>
    </div>
  </section>
</template>

Installation

Separator is part of the main Kappa package. It uses native HTML and adds no runtime dependency beyond Vue.

Barrel

import { Separator } from "@dicehub/kappa";

Granular

import { Separator } from "@dicehub/kappa/components/separator";

Usage

Separator is decorative by default. Add spacing on the surrounding layout so one line can work in dense and spacious interfaces.

Account

Manage profile details and sign-in preferences.

<script setup>
import { Separator } from "@dicehub/kappa/components/separator";
</script>

<template>
  <strong>Account</strong>
  <Separator />
  <p>Manage profile details and sign-in preferences.</p>
</template>

Composition

Typical part hierarchy

Separator <hr>
└── decorative or semantic separator contract

The compact orientation API followsBase UI Separator. Decorative mode follows theRadix Separator primitive. Ark UI does not provide a standalone equivalent. Kappa therefore renders a native hr and owns its semantics and visual treatment.

Examples

Vertical

Use a vertical line inside a layout with a defined block size.

<nav class="sections" aria-label="Project sections">
  <a href="#overview">Overview</a>
  <Separator orientation="vertical" />
  <a href="#activity">Activity</a>
  <Separator orientation="vertical" />
  <a href="#settings">Settings</a>
</nav>

List

Use decorative lines when the list structure already describes the relationship.

Status: Active
Region: Europe
Plan: Standard

<dl>
  <div><dt>Status</dt><dd>Active</dd></div>
  <Separator />
  <div><dt>Region</dt><dd>Europe</dd></div>
  <Separator />
  <div><dt>Plan</dt><dd>Standard</dd></div>
</dl>

Semantic Separator

Set decorative to false when the divider marks a meaningful boundary. Add an accessible label when the boundary needs a specific name.

Service status

All systems are operational.

Last deployment

Today at 09:42 UTC

<section>
  <div>
    <strong>Service status</strong>
    <p>All systems are operational.</p>
  </div>
  <Separator :decorative="false" aria-label="Deployment details" />
  <div>
    <strong>Last deployment</strong>
    <p>Today at 09:42 UTC</p>
  </div>
</section>

Accessibility

Keep the default decorative mode when headings, lists, or navigation already define structure.
Use decorative=false only when the boundary adds useful document meaning.
Match orientation to the visible axis. Kappa forwards it to assistive technology for semantic separators.
Do not put text inside Separator. Use adjacent visible text or a labeled composition instead.
The line remains visible in forced-colors mode.

API Reference

Separator

Renders a native hr. Native attributes, data attributes, and consumer classes pass to the root.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Sets the visual axis and semantic orientation of the line.
`decorative`	`boolean`	`true`	Removes separator semantics when the line only supports visual layout.

Data Slots

Slot	Element	Description
`separator`	`hr`	Native dividing line.

Data Attributes

Attribute	Value	Description
`data-orientation`	`"horizontal" \| "vertical"`	Resolved visual axis.

Exports

Export	Description
`Separator`	Native horizontal or vertical dividing line.
`SeparatorProps`	Public prop contract.
`SeparatorOrientation`	Supported orientation values.
`SEPARATOR_ORIENTATIONS`	Supported orientation list.
`SEPARATOR_DEFAULT_ORIENTATION`	Default horizontal orientation.
`isSeparatorOrientation`	Orientation type guard.
`resolveSeparatorOrientation`	Safe orientation resolver.