MUI Pagination - Example & Tutorial

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Basic Pagination

Use the following props with Pagination component: count prop for number of page items and color prop for different colored pagination.

---

Outlined Pagination

Use variant='outlined' prop for outlined pagination.

---

Tonal Pagination

Use variant='Tonal' prop for Tonal pagination.

---

Disabled Pagination

Use disabled prop with Pagination component to disable the whole pagination.

---

Rounded Pagination

Use shape='rounded' prop for rounded pagination.

---

Sizes

Use size={'small' | 'large'} prop for different sizes of pagination.

---

Buttons

Use showFirstButton & showLastButton props to show first-page and last-page buttons and hidePrevButton & hideNextButton props to hide previous-page and next-page buttons.

---

Controlled Pagination

Manage page and onChange props with the help of a state.

Page: 1

---

Pagination Ranges

You can specify how many digits to display either side of current page with the siblingRange prop, and adjacent to the start and end page number with the boundaryRange prop.

---