Back to componentszyra-divider
Divider
Horizontal and vertical separators for organizing content sections, form layouts, and navigation groups.
Component preview
Explore the available states and the real library behavior for this component.
zyra-divider Playground
Control every input live and see the result instantly
Controls
orientation
variant
align
label
width
Preview
Above content
or
Generated Code
<zyra-divider
label="or"
/>Line Styles
solid
solid
dashed
dashed
dotted
dotted
Label Alignment
start
center
end
Real World Examples
Sign in with your account
or
Settings sections
Profile
Users
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component } from '@angular/core';
import { ZyraDivider } from 'zyra-ng-ui';
@Component({
selector: 'app-demo',
standalone: true,
imports: [ZyraDivider],
template: `
<zyra-divider label="or" />
`,
})
export class DemoComponent {}Variants
All the visual modes and states available for this component.
solidDefault solid 1px line
dashedDashed line for softer separation
dottedDotted line for subtle dividers
verticalVertical orientation for inline layouts
API
All inputs and configuration options for zyra-divider.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Optional centered text label (e.g. "or") |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Line direction |
style | 'solid' | 'dashed' | 'dotted' | 'solid' | Line stroke style |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="separator" for screen reader context
- Vertical dividers should have aria-orientation="vertical"
- When used decoratively, add aria-hidden="true"