# Paginator.

## Overview

### What does the component do?

- It shows that several elements or pages are available through which the user can navigate.

### When should the component be used?

- When several, horizontal elements have to be swiped.

### Rules

- Can only be used for horizontal swiping.
- The pagination contains one bubble per element.
- If only one element is available, the pagination is hidden.
- The pagination is not in a loop

### Accessibility

- State of pagination must be stored as alternative text (e.g. "Page 2 of 3").

## Variants

### Variants

- Default
- Floating

#### Default

![Image of the pagination, default](https://digital.sbb.ch/assets/images/mobile/paginator-default-light.webp "Paginator, default")

![Image of the pagination, default](https://digital.sbb.ch/assets/images/mobile/paginator-default-dark.webp "Paginator, default")

#### Floating

![Image of the pagination, floating](https://digital.sbb.ch/assets/images/mobile/paginator-floating-light.webp "Paginator, floating")

![Image of the pagination, floating](https://digital.sbb.ch/assets/images/mobile/paginator-floating-dark.webp "Paginator, floating")

### Specification

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=327-11721&t=N7M8b5Y9aIJc4LzY-1)

---

Source: https://digital.sbb.ch/en/design-system/mobile/components/paginator/