Pagination

Apply the .pagination class to an unordered list of anchor tags to setup pagination. For screen readers, wrap the pagination in a <nav> tag with an [aria-label] attribute.

Active & Disabled States

To indicate active and disabled states, simply add the .pagination__item--active and .pagination__item--disabled classes to the list items where applicable.

Sizes

Adjust the size of the pagination by applying a size modifier. Available modifiers are xs, sm, md, lg and xl. The default size is md.