Divider

A thin line that groups content in lists and layouts.

Only use dividers if items can’t be grouped with open space. Use dividers to group things, not separate individual items.

API
List Dividers

Inbox

Sent

Drafts

Spam

<MudPaper Width="300px" Square="true">
    <MudList T="string">
        <MudListItem>Inbox</MudListItem>
        <MudDivider />
        <MudListItem>Sent</MudListItem>
        <MudDivider />
        <MudListItem>Drafts</MudListItem>
        <MudDivider />
        <MudListItem>Spam</MudListItem>
    </MudList>
</MudPaper>
Inset Dividers

Adds a margin to the left side of the divider.

Trending

Most Stars

History 

<MudPaper Width="300px" Square="true">
    <MudList T="string">
        <MudListItem Icon="@Icons.Material.Filled.TrendingUp">
            Trending
        </MudListItem>
        <MudDivider DividerType="DividerType.Inset" />
        <MudListItem Icon="@Icons.Material.Filled.StarRate">
            Most Stars
        </MudListItem>
        <MudDivider DividerType="DividerType.Inset" />
        <MudListItem Icon="@Icons.Material.Filled.History">
            History
        </MudListItem>
    </MudList>
</MudPaper>
Middle Dividers

Middle dividers have margin on both left and right side.

Uranium-235

This is the type of uranium used in the RBMK reactors.

Select Reactor Type

RBMK-1000
RBMK-1500
RBMKP-2400
<MudCard>
    <MudCardHeader>
        <CardHeaderContent>
            <MudText Typo="Typo.h5">Uranium-235</MudText>
        </CardHeaderContent>
    </MudCardHeader>
    <MudCardContent>
        <MudText>This is the type of uranium used in the RBMK reactors.</MudText>
        <MudDivider DividerType="DividerType.Middle" Class="my-6"/>
        <MudText GutterBottom="true">Select Reactor Type</MudText>
        <MudChip T="string" Color="Color.Secondary">RBMK-1000</MudChip><MudChip T="string">RBMK-1500</MudChip><MudChip T="string">RBMKP-2400</MudChip>
    </MudCardContent>
    <MudCardActions>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Read more</MudButton>
    </MudCardActions>
</MudCard>
Vertical Dividers

Vertical dividers can be used inside parents with a set height. If the parent doesn't have a set height but is displayed with flex, use the Flexitem property.

<MudPaper Square="true" Class="d-flex justify-space-around">
    <MudIconButton Icon="@Icons.Material.Filled.FormatAlignRight" Color="Color.Dark" Class="rounded-0" />
    <MudIconButton Icon="@Icons.Material.Filled.FormatAlignCenter" Color="Color.Dark" Class="rounded-0" />
    <MudIconButton Icon="@Icons.Material.Filled.FormatAlignLeft" Color="Color.Dark" Class="rounded-0" />

    <MudDivider Vertical="true" FlexItem="true" />

    <MudIconButton Icon="@Icons.Material.Filled.FormatBold" Color="Color.Dark" Class="rounded-0" />
    <MudIconButton Icon="@Icons.Material.Filled.FormatItalic" Color="Color.Dark" Class="rounded-0" />
    <MudIconButton Icon="@Icons.Material.Filled.FormatUnderlined" Color="Color.Dark" Class="rounded-0" />
</MudPaper>
An unhandled error has occurred. Reload 🗙