Pagination | Vision UI Dashboard React @ Creative Tim & Simmmple

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

// Vision UI Dashboard React components import VuiPagination from "components/VuiPagination"; // @mui material components import Icon from "@mui/material/Icon";

Props Information

Name	Type	Default	Description
item	bool	false	Turns the `VuiPagination` into a list item.
variant	'gradient''contained'	gradient	Change the `VuiPagination` background color to gradient, you should only use it for the `VuiPagination` that doesn't contain the `item` prop.
color	'primary''secondary''info''success''warning''error''light''dark'	info	Change `VuiPagination` background color, you should only use it for the `VuiPagination` that doesn't contain the `item` prop.
size	'small''medium''large'	medium	Change the `VuiPagination` size, you should only use it for the `VuiPagination` that doesn't contain the `item` prop.
active	bool	false	Marks the `VuiPagination` as active, you should only use it for the `VuiPagination` that has the `item` prop.
children*	node		Use to pass node or content inside the `VuiPagination`, its the only required prop.

Sizes

// Vision UI Dashboard React components import VuiPagination from "components/VuiPagination"; // @mui material components import Icon from "@mui/material/Icon";

Variants

// Vision UI Dashboard React components import VuiPagination from "components/VuiPagination"; // @mui material components import Icon from "@mui/material/Icon";