v2.0.0

Design System

Here you'll find everything you need to create your interfaces, from basics to complex components and prebuilt templates. Back to previous design system

Current screen size
1280px / 867px

Page Navigation

Appearance variations

Defines the visual style of the element.

<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>&nbsp;
		<span class="pagination__separator">&#8212;</span>&nbsp;
		<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>&nbsp;
		<span class="pagination__separator">&#8212;</span>&nbsp;
		<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>&nbsp;
		<span class="pagination__separator">&#8212;</span>&nbsp;
		<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.

<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>&nbsp;
		<span class="pagination__separator">&#8212;</span>&nbsp;
		<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>&nbsp;
		<span class="pagination__separator">&#8212;</span>&nbsp;
		<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