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