Separator
Directive for applying Kikita UI separator styling to a native horizontal rule that divides related groups of content or actions.
Import the public directive from the published package entrypoint.
import { KuiSeparatorDirective } from '@kikita-labs/ui';
// Import runtime styles once, application-wide:
import '@kikita-labs/ui/styles';Use the native hr element as the separator host instead of a div for purely visual dividers.
Account details
Billing details
<section>
<p>Account details</p>
<hr kuiSeparator />
<p>Billing details</p>
</section>appearance controls divider emphasis. The marker directive stays boolean-like; visual variants live on appearance, not on the kuiSeparator value itself. Defaults to default.
Subtle
Default
Strong
<p>Subtle</p>
<hr kuiSeparator appearance="subtle" />
<p>Default</p>
<hr kuiSeparator appearance="default" />
<p>Strong</p>
<hr kuiSeparator appearance="strong" />spacing sets outer spacing around the divider line. Defaults to sm.
none
xs
sm
md
lg
<p>none</p>
<hr kuiSeparator spacing="none" />
<p>xs</p>
<hr kuiSeparator spacing="xs" />
<p>sm</p>
<hr kuiSeparator spacing="sm" />
<p>md</p>
<hr kuiSeparator spacing="md" />
<p>lg</p>
<hr kuiSeparator spacing="lg" />orientation switches the divider to a vertical line that stretches to the parent block size, for example between toolbar actions.
<div class="separator-vertical-example__toolbar">
<button kuiButton type="button" shape="ghost">Bold</button>
<button kuiButton type="button" shape="ghost">Italic</button>
<hr kuiSeparator orientation="vertical" spacing="xs" />
<button kuiButton type="button" shape="ghost">Link</button>
</div>Inputs verified against @kikita-labs/ui v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'subtle' | 'default' | 'strong' | 'default' | Visual divider emphasis. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Divider direction. Vertical separators set aria-orientation="vertical" and stretch to the parent block size. |
| spacing | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | Outer spacing around the divider line. |
Separator keeps native hr semantics instead of replacing them with ARIA roles.
- Prefer the native
<hr kuiSeparator>host over a styleddivfor structural dividers. - The separator is not focusable and has no hover, focus, active, or disabled states.
- Vertical separators (
orientation="vertical") exposearia-orientation="vertical"automatically. - Do not add labels by default. Named separators should be rare structural boundaries, not a default pattern.