Divider

The Divider component is a versatile UI element used to separate content, providing a clear visual distinction between different sections or elements within your application. It enhances readability and organizes the layout by creating logical divisions.

Default Divider

A basic divider shown in solid, dashed, and dotted styles

Source

<Divider/>

<Divider Style="@DividerStyle.Dashed"/>

<Divider Style="@DividerStyle.Dotted"/>

Divider with Label

A divider with text label shown in solid, dashed, and dotted styles

Source

<Divider Style=@DividerStyle.Solid>Solid</Divider>

<Divider Style=@DividerStyle.Dashed>Dashed</Divider>

<Divider Style=@DividerStyle.Dotted>Dotted</Divider>

Divider with Aligned Label

A divider with text label aligned to start, center, and end

Source

<Divider LabelAlignment="Align.Start" class="text-onSurface dark:text-onSurfaceDark">Start</Divider>

<Divider LabelAlignment="Align.Center" class="text-onSurface dark:text-onSurfaceDark">Center</Divider>

<Divider LabelAlignment="Align.End" class="text-onSurface dark:text-onSurfaceDark">Middle</Divider>

Divider with Icon

A divider with icon label styled by Tailwind classes

Source

<Divider Style=@DividerStyle.Solid class="text-lg text-onSurface dark:text-onSurfaceDark"><Blazicon Svg="MdiIcon.PlusCircle"/></Divider>