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 using a MudImage within the MudAvatar.

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

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