MudBlazor - Blazor Component Library

Class	Properties
cursor-alias	cursor: alias;
cursor-all-scroll	cursor: all-scroll;
cursor-auto	cursor: auto;
cursor-cell	cursor: cell;
cursor-col-resize	cursor: col-resize;
cursor-copy	cursor: copy;
cursor-crosshair	cursor: crosshair;
cursor-default	cursor: default;
cursor-grab	cursor: grab;
cursor-grabbing	cursor: grabbing;
cursor-help	cursor: help;
cursor-move	cursor: move;
cursor-no-drop	cursor: no-drop;
cursor-none	cursor: none;
cursor-not-allowed	cursor: not-allowed;
cursor-n-resize	cursor: n-resize;
cursor-pointer	cursor: pointer;
cursor-progress	cursor: progress;
cursor-row-resize	cursor: row-resize;
cursor-text	cursor: text;
cursor-url	cursor: url;
cursor-vertical-text	cursor: vertical-text;
cursor-wait	cursor: wait;
cursor-w-resize	cursor: w-resize;
cursor-zoom-in	cursor: zoom-in;
cursor-zoom-out	cursor: zoom-out;

Basic Usage

With the cursor utilities you can control which cursor is displayed when hovering over the element.

<MudButton Variant="Variant.Filled">Default</MudButton>
<MudButton Class="cursor-progress" Color="Color.Primary" Variant="Variant.Filled">Saving...</MudButton>
<MudButton Class="cursor-not-allowed" Color="Color.Primary" Variant="Variant.Filled">Delete</MudButton>

Interactive Example

Choose a cursor and hover your mouse over the paper.

cursor-all-scroll

cursor-auto

cursor-cell

cursor-col-resize

cursor-copy

cursor-crosshair

cursor-default

cursor-grab

cursor-grabbing

cursor-help

cursor-move

cursor-no-drop

cursor-none

cursor-not-allowed

cursor-n-resize

cursor-pointer

cursor-progress

cursor-row-resize

cursor-text

cursor-url

cursor-vertical-text

cursor-wait

cursor-w-resize

cursor-zoom-in

cursor-zoom-out

<div class="d-flex flex-wrap gap-4">
    @foreach (var cursor in Cursors)
    {
        <MudPaper Class="@($"d-flex justify-center align-center {cursor}")" Width="128px" Height="64px">
            @cursor
        </MudPaper>
    }
</div>

@code {
    string[] Cursors = new[]
    {
        "cursor-all-scroll", "cursor-auto", "cursor-cell", "cursor-col-resize", "cursor-copy", "cursor-crosshair", "cursor-default", "cursor-grab", "cursor-grabbing", "cursor-help", "cursor-move", "cursor-no-drop", "cursor-none", "cursor-not-allowed", "cursor-n-resize", "cursor-pointer", "cursor-progress", "cursor-row-resize", "cursor-text", "cursor-url", "cursor-vertical-text", "cursor-wait", "cursor-w-resize", "cursor-zoom-in", "cursor-zoom-out"
    };
}