Building Materials Marketplace

Basic Example

 <MudButtonGroup Color="Color.Info" Variant="Variant.Filled">
    <MudButton><MudIcon Icon="bi bi-skip-backward fs-14 mb-2" /></MudButton>
    <MudButton><MudIcon Icon="bi bi-pause fs-14 mb-2" /></MudButton>
    <MudButton><MudIcon Icon="bi bi-skip-forward fs-14 mb-2" /></MudButton>
</MudButtonGroup>

Navigation

Active Link Link Link

<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled">
<MudButton Href="javascript:void(0);">Active Link</MudButton>
<MudButton Href="javascript:void(0);">Link</MudButton>
<MudButton Href="javascript:void(0);">Link</MudButton>
</MudButtonGroup>

Mixed Style

<MudButtonGroup OverrideStyles="_overrideStyles">
<MudButton Color="Color.Error" Variant="Variant.Filled">Left</MudButton>
<MudButton Color="Color.Warning" Variant="Variant.Filled">Middle</MudButton>
<MudButton Color="Color.Success" Variant="Variant.Filled">Right</MudButton>
</MudButtonGroup>

Outline Styled

 <MudButtonGroup Color="Color.Primary" Variant="Variant.Outlined">
    <MudButton>Left</MudButton>
    <MudButton>Middle</MudButton>
    <MudButton>Right</MudButton>
</MudButtonGroup>

Icon Button Groups

<MudButtonGroup OverrideStyles="_overrideStyles">
<MudCheckBox @bind-Value="Basic_CheckBox1" Class="btn-outline-primary" Variant="Variant.Outlined" Label="Checkbox 1"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox2" Class="btn-outline-primary" Variant="Variant.Outlined" Label="Checkbox 2"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox3" Class="btn-outline-primary" Variant="Variant.Outlined" Label="Checkbox 3"></MudCheckBox>
</MudButtonGroup>
@code {
    public bool Basic_CheckBox1 { get; set; } = false;
    public bool Basic_CheckBox2{ get; set; } = false;
    public bool Basic_CheckBox3 { get; set; } = false;
}

Outlined Button Groups

<MudButtonGroup OverrideStyles="_overrideStyles">
<MudRadioGroup @bind-Value="Radio">
    <MudRadio Value="1" Color="Color.Primary">Radio 1</MudRadio>
    <MudRadio Value="2" Color="Color.Primary">Radio 2</MudRadio>
    <MudRadio Value="3" Color="Color.Primary">Radio 3</MudRadio>
</MudRadioGroup>
</MudButtonGroup>
@code {
    public int Radio { get; set; } = 1;
}

Sizing

<MudButtonGroup OverrideStyles="_overrideStyles" Size="Size.Large">
<MudButton Class="btn-outline-success" Variant="Variant.Outlined">Left</MudButton>
<MudButton Class="btn-outline-success" Variant="Variant.Outlined">Middle</MudButton>
<MudButton Class="btn-outline-success" Variant="Variant.Outlined">Right</MudButton>
</MudButtonGroup>
<MudButtonGroup OverrideStyles="_overrideStyles" Size="Size.Medium">
<MudButton Class="btn-outline-success" Variant="Variant.Outlined">Left</MudButton>
<MudButton Class="btn-outline-success" Variant="Variant.Outlined">Middle</MudButton>
<MudButton Class="btn-outline-success" Variant="Variant.Outlined">Right</MudButton>
</MudButtonGroup>
<MudButtonGroup OverrideStyles="_overrideStyles" Size="Size.Small">
<MudButton Class="btn-outline-success" Variant="Variant.Outlined">Left</MudButton>
<MudButton Class="btn-outline-success" Variant="Variant.Outlined">Middle</MudButton>
<MudButton Class="btn-outline-success" Variant="Variant.Outlined">Right</MudButton>
</MudButtonGroup>

Button toolbar

<MudToolBar>
<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled" Class="me-2 my-1">
    <MudButton>1</MudButton>
    <MudButton>2</MudButton>
    <MudButton>3</MudButton>
    <MudButton>4</MudButton>
</MudButtonGroup>
<MudButtonGroup Color="Color.Secondary" Variant="Variant.Filled" Class="me-2 my-1">
    <MudButton>5</MudButton>
    <MudButton>6</MudButton>
    <MudButton>7</MudButton>
</MudButtonGroup>
<MudButtonGroup Color="Color.Info" Variant="Variant.Filled" Class="my-1">
    <MudButton>8</MudButton>
</MudButtonGroup>
</MudToolBar>
<MudToolBar>
<MudButtonGroup OverrideStyles="_overrideStyles" Class="me-2 my-1">
    <MudButton Class="btn-outline-secondary" Variant="Variant.Outlined">1</MudButton>
    <MudButton Class="btn-outline-secondary" Variant="Variant.Outlined">2</MudButton>
    <MudButton Class="btn-outline-secondary" Variant="Variant.Outlined">3</MudButton>
    <MudButton Class="btn-outline-secondary" Variant="Variant.Outlined">4</MudButton>
</MudButtonGroup>
<MudButtonGroup Class="me-2 my-1">
    <MudIconButton Icon="<path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>" Class="me-1" />
    <MudField Label="Input group example"
        Variant="Variant.Outlined">            
    </MudField>
</MudToolBar>
<MudToolBar Class="d-sm-flex d-block justify-space-between">
<MudButtonGroup OverrideStyles="_overrideStyles" Class="me-2 my-1">
    <MudButton Class="btn-outline-secondary" Variant="Variant.Outlined">1</MudButton>
    <MudButton Class="btn-outline-secondary" Variant="Variant.Outlined">2</MudButton>
    <MudButton Class="btn-outline-secondary" Variant="Variant.Outlined">3</MudButton>
    <MudButton Class="btn-outline-secondary" Variant="Variant.Outlined">4</MudButton>
</MudButtonGroup>
<MudButtonGroup Class="me-2 my-1">
    <MudIconButton Icon="<path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>" Class="me-1" />
    <MudField Label="Input group example"
        Variant="Variant.Outlined">            
    </MudField>
</MudToolBar>

Nesting

<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled">
<MudButton>1</MudButton>
<MudButton>2</MudButton>
<MudMenu Label="Dropdown" Variant="Variant.Filled" EndIcon="<path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
    <MudMenuItems>
        <MudMenuItem>Dropdown link</MudMenuItem>
        <MudMenuItem>Dropdown link</MudMenuItem>
    </MudMenuItems>
</MudMenu>
</MudButtonGroup>

Vertical Variation

<MudGrid>
<MudItem xs="3">
<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled" Vertical="true">
    <MudButton>Button</MudButton>
    <MudButton>Button</MudButton>
    <MudButton>
        Dropdown
        <MudMenu EndIcon="fe fe-chevron-down">
            <MudMenuItems>
                <MudMenuItem>Dropdown link</MudMenuItem>
                <MudMenuItem>Dropdown link</MudMenuItem>
            </MudMenuItems>
        </MudMenu>
    </MudButton>
    <MudButton>Button</MudButton>
    <MudButton>Button</MudButton>
    <MudButton>
        Dropdown
        <MudMenu EndIcon="fe fe-chevron-down">
            <MudMenuItems>
                <MudMenuItem>Dropdown link</MudMenuItem>
                <MudMenuItem>Dropdown link</MudMenuItem>
            </MudMenuItems>
        </MudMenu>
    </MudButton>
    <MudButton>
        Dropdown
        <MudMenu EndIcon="fe fe-chevron-down">
            <MudMenuItems>
                <MudMenuItem>Dropdown link</MudMenuItem>
                <MudMenuItem>Dropdown link</MudMenuItem>
            </MudMenuItems>
        </MudMenu>
    </MudButton>
    <MudButton>
        Dropdown
        <MudMenu EndIcon="fe fe-chevron-down">
            <MudMenuItems>
                <MudMenuItem>Dropdown link</MudMenuItem>
                <MudMenuItem>Dropdown link</MudMenuItem>
            </MudMenuItems>
        </MudMenu>
    </MudButton>
</MudButtonGroup>
</MudItem>
<MudItem xs="3">
<MudButtonGroup Color="Color.Secondary" Variant="Variant.Filled" Vertical="true">
    <MudButton>Button</MudButton>
    <MudButton>Button</MudButton>
    <MudButton>Button</MudButton>
    <MudButton>Button</MudButton>
    <MudButton>Button</MudButton>
    <MudButton>Button</MudButton>
</MudButtonGroup>
</MudItem>
<MudItem xs="3">
<MudButtonGroup OverrideStyles="_overrideStyles">
    <MudRadioGroup @bind-Value="Radio2">
        <MudRadio Value="1" Color="Color.Error">Radio 1</MudRadio>
        <MudRadio Value="2" Color="Color.Error">Radio 2</MudRadio>
        <MudRadio Value="3" Color="Color.Error">Radio 3</MudRadio>
    </MudRadioGroup>
</MudButtonGroup>
</MudItem>
</MudGrid>

Social Group Buttons

<MudButtonGroup OverrideStyles="_overrideStyles">
<MudIconButton Icon="ri-facebook-line" Variant="Variant.Filled" Class="btn-facebook" />
<MudIconButton Icon="ri-twitter-x-line" Variant="Variant.Filled" Class="btn-twitter" />
<MudIconButton Icon="ri-instagram-line" Variant="Variant.Filled" Class="btn-instagram" />
<MudIconButton Icon="ri-github-line" Variant="Variant.Filled" Class="btn-github" />
<MudIconButton Icon="ri-youtube-line" Variant="Variant.Filled" Class="btn-youtube" />
<MudIconButton Icon="ri-google-line" Variant="Variant.Filled" Class="btn-google" />
</MudButtonGroup>