Divider renders a separator with an optional label. Use orientation="horizontal" between stacked sections. For a vertical separator, place it in a flex row with a defined or content-driven height; the surrounding layout supplies its available height. label is a string input, not projected content.
The application supplies the Inputs and owns any surrounding interaction. This component has no model bindings or Outputs. Content projection and icon templates are documented separately where supported.
The separator exposes its orientation and is not focusable or resizable. A divider does not replace a section heading or document structure. Use headings and landmarks to organize important content; use Divider to reinforce the visual boundary.
Key
Action
—
No component-level keyboard interaction; projected buttons and links keep their own keyboard behavior.
All public Inputs are extracted from the pinned Core package. Named types link to their definitions. Only the actual public projection areas and templates are listed below.
Inputs
Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.
Name
Type
Default
Template binding
Description
label
string
''
[label]
Optional text within the separator; not a content template.
orientation
"horizontal" | "vertical"
'horizontal'
[orientation]
horizontal or vertical separator orientation.
Templates
ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.
This component does not expose content projection or public customization templates.
The public border token controls the line, muted text controls the label, and spacing tokens separate both. Vertical dividers need a stretching flex parent, as shown in the example source.
Specific tokens
This component uses shared theme tokens rather than dedicated component hooks.
Shared tokens used
Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.
Token
Purpose here
Other impact
Default / fallback
--neu-border
Normal control and cell borders
Shared by other Core consumers; scope the override.
rgba(15, 23, 42, 0.08)
--neu-text-muted
Secondary labels and supporting content
Shared by other Core consumers; scope the override.
#475569
--neu-font-sans
Text typography
Shared by other Core consumers; scope the override.
