Divider

A line: plain, dashed, labeled or vertical.

JavaScript off: what the HTML and CSS do on their own.

A line between pieces of content: an hr, a vertical separator in a Row, or a line with a label in the middle ("or").

Usage

razor

<Divider />
<Divider Label="or" />
<Row>...<Divider Orientation="Orientation.Vertical" />...</Row>

Plain and dashed

A Divider is an hr line; set Dashed for a lighter break, as before the total.

Preview Code

Preview

Order #1042

Pro plan, yearly $288.00

Extra seats (2) $96.00

Total $384.00

Code

Receipt.razor

<Column Gap="3" Width="Length.Full" MaxWidth="22.Rem" Padding="5" Border="1" Radius="Radius.Lg">
    <TextBlock Weight="FontWeight.Semibold">Order #1042</TextBlock>
    <Divider />
    <Row Justify="Justify.Between">
        <TextBlock As="span">Pro plan, yearly</TextBlock>
        <TextBlock As="span">$288.00</TextBlock>
    </Row>
    <Row Justify="Justify.Between">
        <TextBlock As="span">Extra seats (2)</TextBlock>
        <TextBlock As="span">$96.00</TextBlock>
    </Row>
    <Divider Dashed />
    <Row Justify="Justify.Between">
        <TextBlock As="span" Weight="FontWeight.Semibold">Total</TextBlock>
        <TextBlock As="span" Weight="FontWeight.Semibold">$384.00</TextBlock>
    </Row>
</Column>

With a label

Use Label to put text in the middle of the line, such as or between two ways to sign in.

Preview Code

Preview

Code

Labeled.razor

<Column Gap="4" Width="Length.Full" MaxWidth="20.Rem">
    <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral" StartIcon="Lucide.Lock">Continue with SSO</Button>
    <Divider Label="or" />
    <Button StartIcon="Lucide.Mail">Email me a sign-in link</Button>
</Column>

Vertical

Set Orientation="Orientation.Vertical" for a separator between items in a Row; it takes the row's height.

Preview Code

Preview

AL Ada Lovelace

Oct 12, 2026

6 min read

Code

Vertical.razor

<Row Gap="3" Align="Align.Center" Wrap>
    <Avatar Name="Ada Lovelace" Size="AvatarSize.Sm" />
    <TextBlock As="span" Size="TextSize.Sm" Weight="FontWeight.Medium">Ada Lovelace</TextBlock>
    <Divider Orientation="Orientation.Vertical" />
    <TextBlock As="span" Size="TextSize.Sm" Color="Color.Muted">Oct 12, 2026</TextBlock>
    <Divider Orientation="Orientation.Vertical" />
    <TextBlock As="span" Size="TextSize.Sm" Color="Color.Muted">6 min read</TextBlock>
</Row>

Mode support

What works in each mode, Divider
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

A plain horizontal divider is an hr; a vertical one is a div with role="separator" and aria-orientation="vertical".
A divider with a Label is read as its text ("or"), with no separator role, since a separator's content isn't read.

Parameters

Divider parameters
Prop	Type	Default
`Orientation`Horizontal (the default) or vertical, for use in a row.	`Orientation`	`Orientation.Horizontal`
`Label`Text in the middle of a horizontal line, such as "or".	`string?`
`Dashed`A dashed line.	`bool`	`false`

Plus 25 surface props, 16 item props and 4 common props.

Full API