Building Materials Marketplace

Default Buttons

Link

<div class="btn-list">
    <MudButton Variant="Variant.Filled" Color="Color.Primary">Primary</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Secondary">Secondary</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Success">Success</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Error">Danger</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Warning">Warning</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Info">Info</MudButton>
    <MudButton Variant="Variant.Filled" Class="btn-light">Light</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Dark" Class="mud-white-text">Dark</MudButton>
    <MudButton Href="javascript:void(0);">Link</MudButton>
</div>

rounded-lg Buttons

Link

<div class="btn-list">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="rounded-pill">Primary</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Secondary" Class="rounded-pill">Secondary</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Success" Class="rounded-pill">Success</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Error" Class="rounded-pill">Danger</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Warning" Class="rounded-pill">Warning</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Info" Class="rounded-pill">Info</MudButton>
    <MudButton Variant="Variant.Filled" Class="btn-light rounded-pill">Light</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Dark" Class="rounded-pill mud-white-text">Dark</MudButton>
    <MudButton Href="javascript:void(0);" Class="rounded-pill">Link</MudButton>
</div>

Light Buttons

<div class="btn-list">
    <MudButton Class="btn-primary-light">Primary</MudButton>
    <MudButton Class="btn-secondary-light">Secondary</MudButton>
    <MudButton Class="btn-success-light">Success</MudButton>
    <MudButton Class="btn-danger-light">Danger</MudButton>
    <MudButton Class="btn-warning-light">Warning</MudButton>
    <MudButton Class="btn-info-light">Info</MudButton>
    <MudButton Class="btn-purple-light">Purple</MudButton>
    <MudButton Class="btn-teal-light">Teal</MudButton>
    <MudButton Class="btn-orange-light">Orange</MudButton>
</div>

Light rounded Buttons

<div class="btn-list">
    <MudButton Class="btn-primary-light rounded-pill">Primary</MudButton>
    <MudButton Class="btn-secondary-light rounded-pill">Secondary</MudButton>
    <MudButton Class="btn-success-light rounded-pill">Success</MudButton>
    <MudButton Class="btn-danger-light rounded-pill">Danger</MudButton>
    <MudButton Class="btn-warning-light rounded-pill">Warning</MudButton>
    <MudButton Class="btn-info-light rounded-pill">Info</MudButton>
    <MudButton Class="btn-purple-light rounded-pill">Purple</MudButton>
    <MudButton Class="btn-teal-light rounded-pill">Teal</MudButton>
    <MudButton Class="btn-orange-light rounded-pill">Orange</MudButton>
</div>

Outline Buttons

<div class="btn-list">
    <MudButton Variant="Variant.Outlined" Class="btn-outline-primary">Primary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-secondary">Secondary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-success">Success</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-danger">Danger</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-warning">Warning</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-info">Info</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-light">Light</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-dark">Dark</MudButton>
</div>

rounded Outline Buttons

<div class="btn-list">
    <MudButton Variant="Variant.Outlined" Class="btn-outline-primary rounded-pill">Primary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-secondary rounded-pill">Secondary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-success rounded-pill">Success</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-danger rounded-pill">Danger</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-warning rounded-pill">Warning</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-info rounded-pill">Info</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-light rounded-pill">Light</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-outline-dark rounded-pill">Dark</MudButton>
</div>

Gradient Buttons

<div class="btn-list">
    <MudButton Variant="Variant.Outlined" Class="btn-primary-gradient">Primary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-secondary-gradient">Secondary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-success-gradient">Success</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-danger-gradient">Danger</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-warning-gradient">Warning</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-info-gradient">Info</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-orange-gradient">Orange</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-purple-gradient">Purple</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-teal-gradient">Teal</MudButton>
</div>

rounded-lg Gradient Buttons

<div class="btn-list">
    <MudButton Variant="Variant.Outlined" Class="btn-primary-gradient rounded-pill">Primary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-secondary-gradient rounded-pill">Secondary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-success-gradient rounded-pill">Success</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-danger-gradient rounded-pill">Danger</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-warning-gradient rounded-pill">Warning</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-info-gradient rounded-pill">Info</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-orange-gradient rounded-pill">Orange</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-purple-gradient rounded-pill">Purple</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-teal-gradient rounded-pill">Teal</MudButton>
</div>

Ghost Buttons

<div class="btn-list">
    <MudButton Variant="Variant.Outlined" Class="btn-primary-ghost">Primary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-secondary-ghost">Secondary</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-success-ghost">Success</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-danger-ghost">Danger</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-warning-ghost">Warning</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-info-ghost">Info</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-orange-ghost">Orange</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-purple-ghost">Purple</MudButton>
    <MudButton Variant="Variant.Outlined" Class="btn-teal-ghost">Teal</MudButton>
</div>

Button tags

Link

<div class="btn-list">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="mud-white-text" Href="javascript:void(0);">Link</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Secondary" >Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Info" >Input</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Warning" >Submit</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Success" >Reset</MudButton>
</div>

Disabled state with anchor Tags

<div class="btn-list">
    <div class="mb-4">
        <MudButton Variant="Variant.Filled" Disabled="true" Color="Color.Primary" >Primary Button</MudButton>
        <MudButton Variant="Variant.Filled" Disabled="true" Color="Color.Secondary" >Button</MudButton>
        <MudButton Variant="Variant.Outlined" Disabled="true" Class="btn-outline-primary">Primary Button</MudButton>
        <MudButton Variant="Variant.Outlined" Disabled="true" Class="btn-outline-secondary">Button</MudButton>
    </div>

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

Button plugin toggle States

<div class="btn-list">
    <div class="mb-4">
        <MudToggleGroup T="string" @bind-Value="_value1" Color="Color.Primary" >
            <MudToggleItem Value="@("Yes")" Text="Toggle Button" />
        </MudToggleGroup>
        <MudToggleGroup T="string" @bind-Value="_value1" Color="Color.Secondary" >
            <MudToggleItem Value="@("Yes")" Text="Active Toggle Button" />
        </MudToggleGroup>
        <MudToggleGroup T="string" @bind-Value="_value1" Class="btn-teal" Disabled="true">
            <MudToggleItem Value="@("Yes")" Text="Disabled Toggle Button" />
        </MudToggleGroup>
    </div>
    <div>
        <MudToggleGroup T="string" @bind-Value="_value1" Color="Color.Primary" >
            <MudToggleItem Value="@("Yes")" Text="Toggle Link" />
        </MudToggleGroup>
        <MudToggleGroup T="string" @bind-Value="_value1" Color="Color.Secondary" >
            <MudToggleItem Value="@("Yes")" Text="Active Toggle Link" />
        </MudToggleGroup>
        <MudToggleGroup T="string" @bind-Value="_value1" Class="btn-teal" Disabled="true" >
            <MudToggleItem Value="@("Yes")" Text="Disabled Toggle Link" />
        </MudToggleGroup>
    </div>
</div>

Link Functionally Caveat

<div class="btn-list">
    <MudButton Variant="Variant.Filled" Disabled="true" Color="Color.Primary"  Href="javascript:void(0);">Primary Link</MudButton>
    <MudButton Variant="Variant.Filled" Disabled="true" Color="Color.Secondary"  Href="javascript:void(0);">Link</MudButton>
</div>

Loading Buttons

<div class="btn-list d-md-flex flex-wrap">
    <MudButton Variant="Variant.Filled" EndIcon="ri-loader-2-fill" Color="Color.Primary" Class="btn-loader">Loading</MudButton>
    <MudButton Variant="Variant.Outlined" EndIcon="ri-loader-2-fill" Color="Color.Secondary" Class="btn-loader">Loading</MudButton>
    <MudButton EndIcon="ri-loader-4-line" Class="btn-info-transparent btn-loader">Loading</MudButton>
    <MudButton EndIcon="ri-loader-5-line" Class="btn-warning-transparent btn-loader">Loading</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Success" EndIcon="ri-refresh-line" Disabled="true" Class="btn-loader">Disabled</MudButton>
</div>

Icon Buttons

<div class="btn-list d-md-flex d-block">
    <div class="mb-md-0 mb-2">
        <MudIconButton Icon="ri-bank-fill fs-16 align-center" Variant="Variant.Filled" Color="Color.Primary" Class="btn-icon" />
        <MudIconButton Icon="ri-medal-line fs-16 align-center" Variant="Variant.Filled" Color="Color.Info" Class="btn-icon" />
        <MudIconButton Icon="ri-archive-line fs-16 align-center" Variant="Variant.Filled" Color="Color.Error" Class="btn-icon" />
        <MudIconButton Icon="ri-calendar-2-line fs-16 align-center" Variant="Variant.Filled" Color="Color.Warning" Class="btn-icon" />
    </div>
    <div class="mb-md-0 mb-2">
        <MudIconButton Icon="ri-home-smile-line fs-16 align-center" Class="btn-primary-transparent rounded-pill" />
        <MudIconButton Icon="ri-delete-bin-line fs-16 align-center" Class="btn-secondary-transparent rounded-pill" />
        <MudIconButton Icon="ri-notification-3-line fs-16 align-center" Class="btn-success-transparent rounded-pill" />
        <MudIconButton Icon="ri-chat-settings-line fs-16 align-center" Class="btn-danger-transparent rounded-pill" />
    </div>
    <div class="">
        <MudIconButton Icon="ri-phone-line fs-16 align-center" Variant="Variant.Outlined" Class="btn-outline-primary rounded-pill btn-icon" />
        <MudIconButton Icon="ri-customer-service-2-line fs-16 align-center" Variant="Variant.Outlined" Class="btn-outline-info rounded-pill btn-icon" />
        <MudIconButton Icon="ri-live-line fs-16 align-center" Variant="Variant.Outlined" Class="btn-outline-success rounded-pill btn-icon" />
        <MudIconButton Icon="ri-save-line fs-16 align-center" Variant="Variant.Outlined" Class="btn-outline-secondary rounded-pill btn-icon" />
    </div>
</div>

Social Buttons

<div class="btn-list">
    <MudIconButton Icon="ri-facebook-line fs-16 align-center" Variant="Variant.Filled" Class="btn-facebook btn-icon" />
    <MudIconButton Icon="ri-twitter-x-line fs-16 align-center" Variant="Variant.Filled" Class="btn-twitter btn-icon" />
    <MudIconButton Icon="ri-instagram-line fs-16 align-center" Variant="Variant.Filled" Class="btn-instagram btn-icon" />
    <MudIconButton Icon="ri-github-line fs-16 align-center" Variant="Variant.Filled" Class="btn-github btn-icon" />
    <MudIconButton Icon="ri-youtube-line fs-16 align-center" Variant="Variant.Filled" Class="btn-youtube btn-icon" />
    <MudIconButton Icon="ri-google-line fs-16 align-center" Variant="Variant.Filled" Class="btn-google btn-icon" />
</div>

Sizes

<div class="btn-list">
    <MudButton Variant="Variant.Filled" Size="Size.Small" Color="Color.Primary">Small Button</MudButton>
    <MudButton Variant="Variant.Filled" Size="Size.Medium" Color="Color.Secondary">Default Button</MudButton>
    <MudButton Variant="Variant.Filled" Size="Size.Large" Color="Color.Success">Large Button</MudButton>
</div>

Button Widths

<div class="btn-list">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-w-xs">XS</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Secondary" Class="btn-w-sm">SM</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Warning" Class="btn-w-md">MD</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Info" Class="btn-w-lg">LG</MudButton>
</div>

Buttons With Different Shadows

<div class="btn-list d-flex">
    <div class="me-5">
        <MudButton Variant="Variant.Filled" Color="Color.Primary">Button</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Primary">Button</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Primary">Button</MudButton>
    </div>
    <div>
        <MudButton Variant="Variant.Filled" Color="Color.Secondary" Size="Size.Small">Button</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Info" Size="Size.Medium">Button</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Success" Size="Size.Large">Button</MudButton>
    </div>
</div>

Different Colored Buttons With Shadows

<div class="btn-list">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="shadow-primary">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Secondary" Class="shadow-secondary">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Success" Class="shadow-success">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Info" Class="shadow-info">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Warning" Class="shadow-warning">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Error" Class="shadow-danger">Button</MudButton>
    <MudButton Class="btn-purple shadow-purple">Button</MudButton>
    <MudButton Class="btn-orange shadow-orange">Button</MudButton>
</div>

Raised Buttons

<div class="btn-list">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-raised-shadow">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Secondary" Class="btn-raised-shadow">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Success" Class="btn-raised-shadow">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Info" Class="btn-raised-shadow">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Warning" Class="btn-raised-shadow">Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Error" Class="btn-raised-shadow">Button</MudButton>
    <MudButton Class="btn-purple btn-raised-shadow">Button</MudButton>
    <MudButton Class="btn-orange btn-raised-shadow">Button</MudButton>
</div>

Label Buttons

<div class="btn-list">
    <MudButton Variant="Variant.Filled" StartIcon="ri-chat-smile-line label-btn-icon me-2" Color="Color.Primary" Class="label-btn">Primary</MudButton>
    <MudButton Variant="Variant.Filled" StartIcon="ri-settings-4-line label-btn-icon me-2" Color="Color.Secondary" Class="label-btn">Secondary</MudButton>
    <MudButton Variant="Variant.Filled" StartIcon="ri-spam-2-line label-btn-icon me-2 rounded-pill" Color="Color.Warning" Class="label-btn rounded-pill">Warning</MudButton>
    <MudButton Variant="Variant.Filled" StartIcon="ri-phone-line label-btn-icon me-2 rounded-pill" Color="Color.Info" Class="label-btn rounded-pill">Info</MudButton>
    <MudButton Variant="Variant.Filled" EndIcon="ri-thumb-up-line label-btn-icon me-2 rounded-pill" Color="Color.Success" Class="label-btn label-end rounded-pill">Success</MudButton>
    <MudButton Variant="Variant.Filled" EndIcon="ri-close-line label-btn-icon me-2 rounded-pill" Color="Color.Error" Class="label-btn label-end rounded-pill">Cancel</MudButton>
</div>

Custom Buttons

<div class="btn-list">
    <MudButton Variant="Variant.Filled" StartIcon="ri-twitter-x-line" Color="Color.Info" Class="custom-button rounded-pill">Twitter</MudButton>
    <MudButton Class="btn-teal-light btn-border-down">Border</MudButton>
    <MudButton Class="btn-secondary-light btn-border-start">Border</MudButton>
    <MudButton Class="btn-purple-light btn-border-end">Border</MudButton>
    <MudButton Class="btn-warning-light btn-border-top">Border</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Secondary" Class="btn-glare">Glare Button</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Error" Class="btn-hover btn-hover-animate">Like</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Success" Class="btn-darken-hover">Hover</MudButton>
    <MudButton Class="btn-orange btn-custom-border">Hover</MudButton>
</div>

Block buttons

<div class="btn-list">
    <div class="d-grid gap-2 mb-4">
        <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true">Button</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Secondary" FullWidth="true">Button</MudButton>
    </div>
    <div class="d-grid gap-2 d-md-block">
        <MudButton Variant="Variant.Filled" Color="Color.Info">Button</MudButton>
        <MudButton Variant="Variant.Filled" Color="Color.Success">Button</MudButton>
    </div>
    <div class="d-grid gap-2 col-6 mx-auto">
        <MudButton Variant="Variant.Filled" Style="width: 50%;" Color="Color.Error">Button</MudButton>
        <MudButton Variant="Variant.Filled" Style="width: 50%;" Color="Color.Warning">Button</MudButton>
    </div>
    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <MudButton Class="btn-teal me-md-2">Button</MudButton>
        <MudButton Class="btn-purple">Button</MudButton>
    </div>
</div>