Cursor

Specifies the cursor style to be used when hovering over an element.

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"
    };
}

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.3

An unhandled error has occurred. Reload 🗙