Pagination

Usage

Pagination component is an element used to divide large sets of data into smaller, more manageable pages. They are primarily used in interfaces that deal with large amounts of data, such as tables or lists, where they allow users to navigate through the data set with ease.

Types

There is only one type of Pagination component so far. As Bauhaus Design System will evolve, we will introduce Advanced Pagination type that offers more features, including the ability to jump to a specific page, display the total number of pages, and show a range of page numbers for better navigation.

Anatomy and Behavior

Anatomy

Pagination component consists of several interactive elements that altogether are referred to as Pagination Items:

1. Pagination number - are buttons displaying the current page number and available pages the user can navigate to.
2. Previous page button - Allow users to navigate to the previous page. These buttons should be disabled when there is no previous page.
3. Next page button - Allow users to navigate to the next page. These buttons should be disabled when there is no next page.
4. Ellipsis - indicate that there are more pages than can be displayed at once.
5. Pagination arrow icons - is a nested Icon components inside Next and Previous page buttons. This one is not one of Pagination items set.

Behavior

• The Previous page button should be disabled on the first page, and the Next page button should be disabled on the last page to indicate that there are no more previous or next pages, respectively.
• The currently active page number should be visually distinguishable from the other page numbers to provide feedback to the user.
• If the total number of pages exceeds a certain threshold, ellipsis (...) should be used to indicate omitted page numbers between the displayed page numbers.
• Ellipsis can occur at the beginning, at the end or both at the same time depending on user’s position within pagination numbers.
• In total there are 8 pagination item slots available, which means up to 8 pages can be displayed before ellipsis appears to indicate more pages are available but hidden from sight. When a user is in, approximately, middle of the page counts, slots of page items are visible in a way that there is at least one visible page number before and one after the currently selected page number. The rest can be truncated with ellipsis (see example below).
• Designer need to specify how many Items per page should be displayed on the corresponding project level

INFO

The data fetching operation that serves the Pagination with its data to paginate will generate a certain amount of items (that neither designer nor developer have direct control over). In order to control the overall number of pages, the Pagination component accepts a property ‘itemsPerPage’ that, as the name describes, how many items one page contains. Therefore as a result, the overall number of pages will change accordingly.

States

• Pagination number can have :hover, :active, :focus,Disabled and Selected states. They are mutually exclusive which means a Selected Pagination number is not clickable and does not respectively have other states mentioned above. To deselect it user needs to select any other page.
• Ellipsis is a non clickable element as well and therefore does not have states.
• Previous page button and Next page button are clickable and have :hover, :active, :focus and Disabled states. Disabled state indicates that there are no more pages to navigate to in that direction.

Gaps and Sizes

• Pagination arrow icons’ height and width: S
• Pagination item height: XL
• Pagination item min. width: XL
• Pagination item max. width: adapts to the contents’ width.
• Pagination number and Ellipsis’s horizontal padding: 2XS
• Gap between Pagination numbers set and Previous/Next page buttons: 2XS
• Gap between Pagination numbers: Unit

Tokens

SCSS Variable

Value

$paginationItem-bgColor

--color-grey-93

$paginationItem-color

--color-grey-40

$paginationItem-color--selected

--bds-brand-primary-color

$paginationItem-color--locked

--color-grey-70

$paginationItem-outline-color--focus

--color-azure-45

$paginationItem-boxShadow--hover

--embossed-1--grey-98

$paginationItem-boxShadow--active

--debossed-1--grey-98

typography: numbers

Properties

//#region props
export interface PaginationProps {
  modelValue: number,
  numberOfItems: number,
  itemsPerPage?: number,
  textColor?: string,
};
//#endregion

Configurations

Pagination
Size	Component
small
medium
big