Back to the list

Paginator

Use it instead of pagination when you have at least 50 pages.

File to include

@import "components/paginator";

Left

Page of 30 
<div class="paginator" data-justify="left">
    Page <input type="number" min="1" max="30" value="1"> of 30

    <button disabled>
        <fajny-icon icon-name="chevron-left-solid"></fajny-icon>
    </button>
    
    <button>
        <fajny-icon icon-name="chevron-right-solid"></fajny-icon>
    </button>
</div>

Right

Page of 30 
<div class="paginator" data-justify="right">
    Page <input type="number" min="1" max="30" value="1"> of 30

    <button disabled>
        <fajny-icon icon-name="chevron-left-solid"></fajny-icon>
    </button>
    
    <button>
        <fajny-icon icon-name="chevron-right-solid"></fajny-icon>
    </button>
</div>

Attributes

Name Example value Possible values Default Required
data-justify right "left" | "right" left No