Pagination

Navigation for moving through a collection of pages.

#Import

import {
  AutoPagination,
  Pagination,
  PaginationLink,
  PaginationPreviousLink,
} from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Pagination>
  <PaginationContent>
    <PaginationPreviousLink />
    <PaginationItem><PaginationLink selected>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>2</PaginationLink></PaginationItem>
  </PaginationContent>
</Pagination>

#Preview

<Pagination>
  <PaginationContent>
    <PaginationPreviousLink />
    <PaginationItem><PaginationLink selected>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>2</PaginationLink></PaginationItem>
  </PaginationContent>
</Pagination>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Selected page

<PaginationLink selected>2</PaginationLink>

#Disabled links

<PaginationLink disabled>1</PaginationLink>

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.