SuiPagination

The SuiPagination 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

// Soft UI Dashboard React components import SuiPagination from "components/SuiPagination"; // @mui material components import Icon from "@mui/material/Icon";

Props Information

NameTypeDefaultDescription
itemboolfalseTurns the SuiPagination into a list item.
variant'gradient''contained'gradientChange the SuiPagination background color to gradient, you should only use it for the SuiPagination that doesn't contain the item prop.
color'primary''secondary''info''success''warning''error''light''dark'infoChange SuiPagination background color, you should only use it for the SuiPagination that doesn't contain the item prop.
size'small''medium''large'mediumChange the SuiPagination size, you should only use it for the SuiPagination that doesn't contain the item prop.
activeboolfalseMarks the SuiPagination as active, you should only use it for the SuiPagination that has the item prop.
children*nodeUse to pass node or content inside the SuiPagination, its the only required prop.

Sizes

// Soft UI Dashboard React components import SuiPagination from "components/SuiPagination"; // @mui material components import Icon from "@mui/material/Icon";

Variants

// Soft UI Dashboard React components import SuiPagination from "components/SuiPagination"; // @mui material components import Icon from "@mui/material/Icon";