Docs / Components
SenseDividerComponent
Section separator from @artificialsenselabs/ui for horizontal and vertical content boundaries with optional inline labels.
Live demo: run nx serve showcase and open /components/divider (port 4202).
Overview
Category: Layout. Selector: sense-divider. Import: import { SenseDividerComponent } from '@artificialsenselabs/ui';
<sense-divider align="left">Section</sense-divider>Inputs
| Input | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Rule direction. |
type | 'solid' | 'dashed' | 'dotted' | 'solid' | Border line style. |
align | 'left' | 'center' | 'right' | 'top' | 'bottom' | null | null (centre) | Label position along the rule. |
decorative | boolean | false | Hides separator from assistive tech when purely visual. |
ariaLabel | string | null | null | Accessible name when the divider conveys structure. |
styleClass | string | null | null | Additional host classes. |
Accessibility
- Host exposes
role="separator"andaria-orientation. - Set
decorativewhen adjacent headings already define structure. - Provide
ariaLabelwhen the separator itself conveys meaningful boundaries. - Projected label text is visual only — use
ariaLabelfor AT when needed.
APG reference: WAI-ARIA separator roles.