<div class="pagination-wrapper">
    <button class="btn btn-secondary btn-small pagination__btn  btn-icon-only " type="button">
			<span class="btn__inner">
				<span class="btn__icon-wrapper">
					<?xml version="1.0" encoding="utf-8"?>
					<svg
						class='btn__icon '
						version="1.1"
						id="Layer_1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
						x="0px"
						y="0px"
						width="20px"
						height="20px"
						viewBox="0 0 20 20"
						enable-background="new 0 0 20 20"
						xml:space="preserve">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6666 9.16683H6.52492L11.1833 4.5085L9.99992 3.3335L3.33325 10.0002L9.99992 16.6668L11.1749 15.4918L6.52492 10.8335H16.6666V9.16683V9.16683Z"/>
					</svg>
				</span>
				
			</span>	
	</button>
    <button class="btn btn-small pagination__page-btn " type="button">
						<span class="btn__inner">
								<span class="btn__text">1</span>
							
						</span>	
				</button>
    <span class="pagination__page-ellipse">
				<p></p>
			</span>
    <button class="btn btn-small pagination__page-btn " type="button">
						<span class="btn__inner">
								<span class="btn__text">24</span>
							
						</span>	
				</button>
    <button class="btn btn-small pagination__page-btn pagination__page-btn--is-current " type="button">
						<span class="btn__inner">
								<span class="btn__text">25</span>
							
						</span>	
				</button>
    <button class="btn btn-small pagination__page-btn " type="button">
						<span class="btn__inner">
								<span class="btn__text">26</span>
							
						</span>	
				</button>
    <span class="pagination__page-ellipse">
				<p></p>
			</span>
    <button class="btn btn-small pagination__page-btn " type="button">
						<span class="btn__inner">
								<span class="btn__text">68</span>
							
						</span>	
				</button>
    <button class="btn btn-secondary btn-small pagination__btn  btn-icon-only " type="button">
			<span class="btn__inner">
				<span class="btn__icon-wrapper">
					<?xml version="1.0" encoding="utf-8"?>
					<svg
						class='btn__icon '
						version="1.1"
						id="Layer_1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
						x="0px"
						y="0px"
						width="20px"
						height="20px"
						viewBox="0 0 20 20"
						enable-background="new 0 0 20 20"
						xml:space="preserve">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99992 3.3335L8.82492 4.5085L13.4749 9.16683H3.33325V10.8335H13.4749L8.82492 15.4918L9.99992 16.6668L16.6666 10.0002L9.99992 3.3335Z"/>
					</svg>
				</span>
				
			</span>	
	</button>
    <div class="pagination__jump-wrapper">
        <span class="pagination__jump-text">Jump:&nbsp;</span>
        <div class="text-input__inner">
            <input type="" class="text-input__input" placeholder="" value="25" />
        </div>
    </div>
</div>
<div class="pagination-wrapper{{#unless pages}} pagination-wrapper-minimal{{/unless}}">
	{{> @button disabled=disableBack className="btn-secondary btn-small pagination__btn" icon='<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6666 9.16683H6.52492L11.1833 4.5085L9.99992 3.3335L3.33325 10.0002L9.99992 16.6668L11.1749 15.4918L6.52492 10.8335H16.6666V9.16683V9.16683Z"/>' width="20" height="20"}}
	{{#each pages}}
		{{#if text}}
			{{#if isCurrent}}
				{{> @button className="btn-small pagination__page-btn pagination__page-btn--is-current" text=text}}	
			{{else}}
				{{> @button className="btn-small pagination__page-btn" text=text}}
			{{/if}}
		{{else}}
			<span class="pagination__page-ellipse">
				<p></p>
			</span>
		{{/if}}
	{{/each}}
	{{> @button className="btn-secondary btn-small pagination__btn" icon='<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99992 3.3335L8.82492 4.5085L13.4749 9.16683H3.33325V10.8335H13.4749L8.82492 15.4918L9.99992 16.6668L16.6666 10.0002L9.99992 3.3335Z"/>' width="20" height="20"}}
	{{#if showJump}}
	<div class="pagination__jump-wrapper">
		<span class="pagination__jump-text">Jump:&nbsp;</span>
		{{> @input-inner value="25"}}
	</div>
	{{/if}}
</div>

{{!-- TODO: Add the Jump variation --}}
{
  "showJump": true,
  "pages": [
    {
      "text": "1"
    },
    {
      "text": null
    },
    {
      "text": "24"
    },
    {
      "text": "25",
      "isCurrent": true
    },
    {
      "text": "26"
    },
    {
      "text": null
    },
    {
      "text": "68"
    }
  ]
}

Pagination

Pagination allows a user to navigate through a large amount of data.

Guidelines:

  • Only use the simple variation for very small and controlled sets of data
  • Always show the current, first, and last pages
  • When using the ‘Jump’ input, reset invalid input on blur

When to use:

Use Pagination for large sets of data.

When not to use:

  • Small data sets; for small sets of data, pagination may be unnecessary
  • Timelines; TBD — for data in a timeline instead use lazy loading