The MDPagination helps you to create a beautiful pagination list with its items.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
1// Material Dashboard 2 React Components2import MDPagination from"components/MDPagination";34// @mui material components5import Icon from"@mui/material/Icon";67<MDPagination>8<MDPaginationitem>9<Icon>keyboard_arrow_left</Icon>10</MDPagination>11<MDPaginationitemactive>1</MDPagination>12<MDPaginationitem>2</MDPagination>13<MDPaginationitem>3</MDPagination>14<MDPaginationitem>15<Icon>keyboard_arrow_right</Icon>16</MDPagination>17</MDPagination>
Props Information
Name
Type
Default
Description
item
bool
false
Turns the MDPagination into a list item.
variant
'gradient''contained'
gradient
Change the MDPagination background color to gradient, you should only use it for the MDPagination that doesn't contain the item prop.