x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="flex items-center gap"> <div class="flex items-center gap"> <label class="text-sm font-medium" for="limit">Rows per page</label> <select name="limit" id="limit" class="input" style="--input-inline-size: 70px"><option value="10">10</option> <option selected="selected" value="25">25</option> <option value="50">50</option> <option value="100">100</option></select> </div> <nav class="pagination" aria-label="Pagination"> <a class="btn pagination__button" aria-label="Previous page" href="#"> <span class="icon icon--chevron-left" aria-hidden="true"></span> <span>Previous</span> </a> <a class="btn pagination__button" aria-label="Next page" href="#"> <span>Next</span> <span class="icon icon--chevron-right" aria-hidden="true"></span> </a> </nav></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="flex items-center gap"> <div class="flex items-center gap"> <%= label_tag :limit, "Rows per page", class: "text-sm font-medium" %> <%= select_tag :limit, options_for_select([10, 25, 50, 100], 25), class: "input", style: "--input-inline-size: 70px" %> </div> <nav class="pagination" aria-label="Pagination"> <%= link_to "#", class: "btn pagination__button", aria: { label: "Previous page" } do %> <span class="icon icon--chevron-left" aria-hidden="true"></span> <span>Previous</span> <% end %> <%= link_to "#", class: "btn pagination__button", aria: { label: "Next page" } do %> <span>Next</span> <span class="icon icon--chevron-right" aria-hidden="true"></span> <% end %> </nav></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.pagination { align-items: center; column-gap: var(--size-1); display: flex;}.pagination__button { --btn-background: transparent; --btn-border-color: transparent; --btn-box-shadow: none; --btn-cursor: pointer; &[aria-current="page"] { --btn-background: var(--color-surface); --btn-border-color: var(--color-border); --btn-box-shadow: var(--shadow-xs); }}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.