MDPagination
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
// NextJS Material Dashboard 2 components
import MDPagination from "/components/MDPagination";
// @mui material components
import Icon from "@mui/material/Icon";
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. |
| color | 'primary''secondary''info''success''warning''error''light''dark' | dark | Change MDPagination background color, you should only use it for the MDPagination that doesn't contain the item prop. |
| size | 'small''medium''large' | medium | Change the MDPagination size, you should only use it for the MDPagination that doesn't contain the item prop. |
| active | bool | false | Marks the MDPagination as active, you should only use it for the MDPagination that has the item prop. |
| children* | node | Use to pass node or content inside the MDPagination, its the only required prop. |
Sizes
// NextJS Material Dashboard 2 components
import MDPagination from "/components/MDPagination";
// @mui material components
import Icon from "@mui/material/Icon";
Variants
// NextJS Material Dashboard 2 components
import MDPagination from "/components/MDPagination";
// @mui material components
import Icon from "@mui/material/Icon";