React Pagination - Soft UI
The SoftPagination 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 SoftPagination from "components/SoftPagination";
// @mui material components
import Icon from "@mui/material/Icon";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| item | bool | false | Turns the SoftPagination into a list item. |
| variant | 'gradient''contained' | gradient | Change the SoftPagination background color to gradient, you should only use it for the SoftPagination that doesn't contain the item prop. |
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Change SoftPagination background color, you should only use it for the SoftPagination that doesn't contain the item prop. |
| size | 'small''medium''large' | medium | Change the SoftPagination size, you should only use it for the SoftPagination that doesn't contain the item prop. |
| active | bool | false | Marks the SoftPagination as active, you should only use it for the SoftPagination that has the item prop. |
| children* | node | Use to pass node or content inside the SoftPagination, its the only required prop. |
Sizes
// Soft UI Dashboard React components
import SoftPagination from "components/SoftPagination";
// @mui material components
import Icon from "@mui/material/Icon";
Variants
// Soft UI Dashboard React components
import SoftPagination from "components/SoftPagination";
// @mui material components
import Icon from "@mui/material/Icon";