Hairline rule with an optional uppercase label, or a vertical separator inside a flex row. The host element is the rule itself (role="separator"), so it takes flex alignment directly. Use it wherever two blocks of content need a quiet break.
import { Component } from "@angular/core";
import { SuiDivider } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiDivider],
template: `<sui-divider></sui-divider>`,
})
export class Example { }
Basic
The host element is the rule itself, with role="separator" and aria-orientation, so the break is announced. spacing sets the margin above and below in px.
Invoice INV-1043 was sent to Silver Hills Cafe on Aug 22, 2026.
Payment of $1,240.00 cleared on Aug 29, 2026.
<div style="max-width:420px">
<div style="font-size:13px;color:var(--ink-muted)">Invoice INV-1043 was sent to Silver Hills Cafe on Aug 22, 2026.</div>
<sui-divider></sui-divider>
<div style="font-size:13px;color:var(--ink-muted)">Payment of $1,240.00 cleared on Aug 29, 2026.</div>
</div>
Labeled
A label sits between two rule segments and reads as a quiet section break. Horizontal only; a vertical separator ignores it.
Draft entries stay editable until the period closes.
Closed periods are read only and keep an audit trail.
<div style="max-width:420px">
<div style="font-size:13px;color:var(--ink-muted)">Draft entries stay editable until the period closes.</div>
<sui-divider label="July close"></sui-divider>
<div style="font-size:13px;color:var(--ink-muted)">Closed periods are read only and keep an audit trail.</div>
</div>
Weight, dash and spacing
strong swaps the hairline for --border-strong, and the rule above a total is the one place the weight carries meaning. dashed is for provisional or draft splits.
Hairline, the default weight.
Dashed, for a provisional cut.
Tight spacing for dense lists.
Roomy spacing between sections.
Strong, for the split above a total.
Balance due$45,450.00
<div style="max-width:420px">
<div style="font-size:13px;color:var(--ink-muted)">Hairline, the default weight.</div>
<sui-divider></sui-divider>
<div style="font-size:13px;color:var(--ink-muted)">Dashed, for a provisional cut.</div>
<sui-divider dashed label="Unposted"></sui-divider>
<div style="font-size:13px;color:var(--ink-muted)">Tight spacing for dense lists.</div>
<sui-divider spacing="6"></sui-divider>
<div style="font-size:13px;color:var(--ink-muted)">Roomy spacing between sections.</div>
<sui-divider spacing="24"></sui-divider>
<div style="font-size:13px;color:var(--ink-muted)">Strong, for the split above a total.</div>
<sui-divider strong></sui-divider>
<div style="display:flex;justify-content:space-between;font-weight:620"><span style="font-size:13px">Balance due</span><span style="font-size:13px;font-feature-settings:'tnum'">$45,450.00</span></div>
</div>
Vertical separator
orientation="vertical" stretches to the flex row or to height, and spacing becomes the left and right margin.
Centered uppercase micro-label between two rule segments (horizontal only).
orientation
orientation
"horizontal" | "vertical"
'horizontal'
Direction of the rule. vertical is a separator for flex rows; it stretches to the row or to height. Reflected, as on every other element that carries it.
spacing
spacing
number
14
Margin in px: above and below a horizontal rule, left and right of a vertical one.
strong
strong
boolean
false
Draws with --border-strong instead of the hairline.
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.