MudBlazor - Blazor Component Library

Usage

Pagination displays the number of pages based on the Count property, with prev and next buttons surrounding it.
The selected index can be binded with Selected property.

Selected page: 1

<MudPagination Color="Color.Primary" Count="4" @bind-Selected="@_selected"/>

<MudText Align="Align.Center">Selected page: @_selected</MudText>

@code {
    private int _selected = 1;
}

Variants

The default variant is Text but can be changed to both Filled and Outlined

Disabled

Pagination can be disabled with the Disabled property.

<MudPagination Disabled="true" Count="3" />

Rectangular

<div class="d-flex flex-column align-center">
    <MudPagination Rectangular="true" Variant="Variant.Text" Count="6" />
    <MudPagination Rectangular="true" Variant="Variant.Filled" Count="6" Class="my-4" />
    <MudPagination Rectangular="true" Variant="Variant.Outlined" Count="6" />
</div>