Building Materials Marketplace

Pagination

Basic Pagination

<div class="d-flex align-start">
    <MudPagination Rectangular="true" Variant="Variant.Text" Count="2" />
</div>

Pagination With Icons

<MudPagination Rectangular="true" Variant="Variant.Outlined" Count="3" />

Pagination Sizing

<MudPagination Rectangular="true" Size="Size.Small" ShowPreviousButton="false" ShowNextButton="false" Variant="Variant.Filled" Count="3"/>
<MudPagination Rectangular="true" ShowPreviousButton="false" ShowNextButton="false" Variant="Variant.Filled" Count="3"/>
<MudPagination Rectangular="true" Size="Size.Large" ShowPreviousButton="false" ShowNextButton="false" Variant="Variant.Filled" Count="3"/>
    <ul class="pagination pagination-lg mb-0">
        <li class="page-item active" aria-current="page">
            <span class="page-link">1</span>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
    </ul>

Center & Right Aligned Pagination

<div class="d-flex justify-center mb-4">
    <MudPagination Rectangular="true" Variant="Variant.Outlined" Count="3" />
</div>
<div class="d-flex justify-end">
    <MudPagination Rectangular="true" Variant="Variant.Outlined" Count="3" />
</div>

Disabled State

<MudPagination Rectangular="true" Variant="Variant.Filled" Count="3" />
<MudPagination Rectangular="true" Variant="Variant.Outlined" Disabled="true" Count="3" />

Pagination Style-1

<MudPagination Rectangular="true" Count="21" />

Pagination Style-2

<div class="pagination-style-2">
    <MudLink Underline="Underline.None" Class="text-muted me-1">
        Prev
    </MudLink>
    <MudPagination ShowPreviousButton="false" ShowNextButton="false" Rectangular="true" BoundaryCount="1" Count="17" />
    <MudLink Underline="Underline.None" Class="ms-1">
        Next
    </MudLink>
</div>

Pagination Style-3

<MudPagination Variant="Variant.Filled" Count="16" />

Pagination Style-4

<MudPagination Rectangular="true" Variant="Variant.Filled" Count="17" />

Control buttons

<div class="d-flex flex-column align-center">
    <MudPagination ShowPreviousButton="false" ShowNextButton="false" Count="11"/>
    <MudPagination ShowFirstButton="true" ShowLastButton="true" Count="11" Class="mt-4"/>
</div>