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 { KuiSeparator } 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>Set defaults.separator once for the application or for a subtree. Each option resolves as local input > defaults.separator.<option> > built-in default.
import { provideKikitaUi } from '@kikita-labs/ui';
export const appConfig: ApplicationConfig = {
providers: [
provideKikitaUi({
defaults: {
separator: {
/* options below */
},
},
}),
],
};| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'subtle' | 'default' | 'strong' | — | Default appearance. |
| orientation | 'horizontal' | 'vertical' | — | Default orientation. |
| spacing | 'none' | 'xs' | 'sm' | 'md' | 'lg' | — | Default spacing around the separator. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'subtle' | 'default' | 'strong' | undefined | undefined | Visual divider emphasis. Falls back to defaults.separator.appearance, then default. |
| orientation | 'horizontal' | 'vertical' | undefined | undefined | Divider direction (defaults.separator.orientation, then horizontal). Vertical separators set aria-orientation="vertical" and stretch to the parent block size. |
| spacing | 'none' | 'xs' | 'sm' | 'md' | 'lg' | undefined | undefined | Outer spacing around the divider line. Falls back to defaults.separator.spacing, then sm. |
| KuiSeparatorOptions | interface | - | Shape of defaults.separator: appearance, orientation and spacing. |
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.
Consumer-visible changes of @kikita-labs/ui 2.0 for Separator.
- The directive class is
KuiSeparator; theDirectivesuffix is gone. - Appearance, orientation and spacing defaults moved to
provideKuiDefaults({ separator: { ... } }); the inputs are nowundefineduntil set.