MudBlazor - Blazor Component Library

Usage

Basic avatars, normally used to display text or numbers.MudAvatar can be colored with the Color property.

M

U

D

<MudAvatar Color="Color.Primary">M</MudAvatar>
<MudAvatar Color="Color.Secondary">U</MudAvatar>
<MudAvatar Color="Color.Tertiary">D</MudAvatar>

Outlined

By default, the avatar is filled but can be changed with the Variant property.

M

U

D

<MudAvatar Color="Color.Info" Variant="Variant.Outlined">M</MudAvatar>
<MudAvatar Color="Color.Success" Variant="Variant.Outlined">U</MudAvatar>
<MudAvatar Color="Color.Warning" Variant="Variant.Outlined">D</MudAvatar>

Icons

To create an icon avatar, just add an MudIcon inside it.

<MudAvatar Color="Color.Warning" Variant="Variant.Filled">
    <MudIcon Color="Color.Dark" Icon="@Icons.Custom.Uncategorized.Radioactive" Size="Size.Large" />
</MudAvatar>
<MudAvatar Color="Color.Primary" Variant="Variant.Outlined">
    <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" />
</MudAvatar>
<MudAvatar Color="Color.Secondary" Variant="Variant.Outlined">
    <MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" />
</MudAvatar>

Images

Avatars can display images as well, specify a link to the image with Image. If you specify an Alt prop, you can specify an alternative text description for the image to help with accessibility or if the image url isn't valid.

<MudAvatar Image="images/mony.jpg" />
<MudAvatar Image="images/mony.jpg" Alt="An image of the best dog ever!"/>
<MudAvatar Image="images/toiletvisit.jpg" />

Sizes

You can change the size with the pre-defined Size prop or change the Width and Height in CSS.

A

<MudAvatar Size="Size.Small" Color="Color.Primary">A</MudAvatar>
<MudAvatar Size="Size.Medium" Color="Color.Primary">A</MudAvatar>
<MudAvatar Size="Size.Large" Color="Color.Primary">A</MudAvatar>
<MudAvatar Style="height:70px; width:70px; font-size:2rem;" Color="Color.Primary">A</MudAvatar>
<MudAvatar Style="height:70px; width:70px; font-size:2rem;" Color="Color.Primary" Variant="Variant.Outlined">A</MudAvatar>
<MudAvatar Size="Size.Large" Color="Color.Primary" Variant="Variant.Outlined">A</MudAvatar>
<MudAvatar Size="Size.Medium" Color="Color.Primary" Variant="Variant.Outlined">A</MudAvatar>
<MudAvatar Size="Size.Small" Color="Color.Primary" Variant="Variant.Outlined">A</MudAvatar>

Shapes

With the Rounded and Square props, you can change the border radius.

N

<MudAvatar Square="true">N</MudAvatar>
<MudAvatar Rounded="true" Color="Color.Secondary">
    <MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" />
</MudAvatar>
<MudAvatar Color="Color.Primary">
    <MudIcon Icon="@Icons.Material.Filled.Comment" />
</MudAvatar>
<MudAvatar Square="true" Variant="Variant.Outlined">N</MudAvatar>
<MudAvatar Rounded="true" Color="Color.Secondary"  Variant="Variant.Outlined">
    <MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" />
</MudAvatar>
<MudAvatar Color="Color.Primary" Variant="Variant.Outlined">
    <MudIcon Icon="@Icons.Material.Filled.Comment" />
</MudAvatar>

Groups

You can group or stack avatars with MudAvatarGroup

+3

Max Avatars

Spacing

<MudAvatarGroup Max="@max" Spacing="@spacing" MaxColor="Color.Primary">
    <MudAvatar Image="images/jonny.jpg" />
    <MudAvatar Image="images/mony.jpg" />
    <MudAvatar Image="images/toiletvisit.jpg" />
    <MudAvatar Image="images/jonny.jpg" />
    <MudAvatar Image="images/mony.jpg" />
    <MudAvatar Image="images/toiletvisit.jpg" />
</MudAvatarGroup>

<MudGrid>
    <MudItem xs="12" sm="6">
        <MudSlider Min="0" Max="6" Step="0" @bind-Value="@max" Color="Color.Info">Max Avatars</MudSlider>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudSlider Min="0" Max="16" Step="0" @bind-Value="@spacing" Color="Color.Error">Spacing</MudSlider>
    </MudItem>
</MudGrid>

@code {
    int max = 3;
    int spacing = 3;
}

Badges

<MudBadge Color="Color.Success" Overlap="true" Bordered="true">
    <MudAvatar Image="images/jonny.jpg" />
</MudBadge>
<MudBadge Color="Color.Warning" Overlap="true" Bordered="true">
    <MudAvatar Image="images/mony.jpg" />
</MudBadge>
<MudBadge Color="Color.Error" Icon="@Icons.Material.Filled.Remove" Overlap="true" Bordered="true">
    <MudAvatar Image="images/toiletvisit.jpg" />
</MudBadge>

Avatar

API