Page Navigation
Appearance variations
Defines the visual style of the element.
1
—
5
1
—
5
1
—
5
<div class="toolbar">
<button type="button" class="btn btn--primary btn--icon btn--default">
<span class="btn__content">
<span class="u-sr-accessible">Page précédente</span>
<div class="svg-icon svg-icon-arrow-left-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
<div class="pagination pagination--primary pagination--default">
<span id="pagination-current" class="pagination__page">1</span>
<span class="pagination__separator">—</span>
<span id="pagination-total" class="pagination__page">5</span>
</div>
<button type="button" class="btn btn--primary btn--icon btn--default">
<span class="btn__content">
<span class="u-sr-accessible">Page suivante</span>
<div class="svg-icon svg-icon-arrow-right-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div><div class="toolbar">
<button type="button" class="btn btn--secondary btn--icon btn--default">
<span class="btn__content">
<span class="u-sr-accessible">Page précédente</span>
<div class="svg-icon svg-icon-arrow-left-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
<div class="pagination pagination--secondary pagination--default">
<span id="pagination-current" class="pagination__page">1</span>
<span class="pagination__separator">—</span>
<span id="pagination-total" class="pagination__page">5</span>
</div>
<button type="button" class="btn btn--secondary btn--icon btn--default">
<span class="btn__content">
<span class="u-sr-accessible">Page suivante</span>
<div class="svg-icon svg-icon-arrow-right-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div><div class="toolbar">
<button type="button" class="btn btn--transparent btn--icon btn--default">
<span class="btn__content">
<span class="u-sr-accessible">Page précédente</span>
<div class="svg-icon svg-icon-arrow-left-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
<div class="pagination pagination--transparent pagination--default">
<span id="pagination-current" class="pagination__page">1</span>
<span class="pagination__separator">—</span>
<span id="pagination-total" class="pagination__page">5</span>
</div>
<button type="button" class="btn btn--transparent btn--icon btn--default">
<span class="btn__content">
<span class="u-sr-accessible">Page suivante</span>
<div class="svg-icon svg-icon-arrow-right-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>Size variations
Defines the size of the element.
1
—
5
1
—
5
<div class="toolbar">
<button type="button" class="btn btn--primary btn--icon btn--default">
<span class="btn__content">
<span class="u-sr-accessible">Page précédente</span>
<div class="svg-icon svg-icon-arrow-left-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
<div class="pagination pagination--primary pagination--default">
<span id="pagination-current" class="pagination__page">1</span>
<span class="pagination__separator">—</span>
<span id="pagination-total" class="pagination__page">5</span>
</div>
<button type="button" class="btn btn--primary btn--icon btn--default">
<span class="btn__content">
<span class="u-sr-accessible">Page suivante</span>
<div class="svg-icon svg-icon-arrow-right-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div><div class="toolbar">
<button type="button" class="btn btn--primary btn--icon btn--small">
<span class="btn__content">
<span class="u-sr-accessible">Page précédente</span>
<div class="svg-icon svg-icon-arrow-left-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
<div class="pagination pagination--primary pagination--small">
<span id="pagination-current" class="pagination__page">1</span>
<span class="pagination__separator">—</span>
<span id="pagination-total" class="pagination__page">5</span>
</div>
<button type="button" class="btn btn--primary btn--icon btn--small">
<span class="btn__content">
<span class="u-sr-accessible">Page suivante</span>
<div class="svg-icon svg-icon-arrow-right-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>List of arguments for page navigation
| Argument | Type | Description | Possible Values |
|---|---|---|---|
| current-page | number | The current active page number. | — |
| pages-total | number | The total number of pages available. | — |
| skin | array | Defines the visual style of the pagination. | primary, secondary, transparent |
| size | array | Defines the size of the pagination. | default, small |