Hex doc
Phoenix
Semantic
Use class="ui-{role}" to set the semantic palette of a pagination.
Available options: accent, alert, brand, info, success
<.pagination class="pagination" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-accent" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-brand" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-alert" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-success" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-info" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
Size
Use class="ui-size-{size}" to set the size of a pagination.
Available options: xs, sm, md (default), lg, xl
<.pagination class="pagination ui-size-sm" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-size-md" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-size-lg" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-size-xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
Rounded
Use class="ui-rounded-{step}" to set the corner radius of a pagination.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
<.pagination class="pagination ui-rounded-none" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-rounded-sm" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-rounded-md" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-rounded-lg" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-rounded-xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination ui-rounded-full" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
Width
Without w-*, width comes from component CSS. Default for pagination: md (width: fit-content).
Use class="w-{step}" to set the host stretch mode of a pagination (`w-full`, `w-fit`); use Max width for named container steps.
Available options: default (fit-content), full, fit
default (fit-content)
full
fit
<.pagination class="pagination" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination w-full" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination w-fit" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
Max width
Without max-w-*, width comes from component CSS. Default for pagination: md (width: fit-content).
Use class="max-w-{step}" to set the maximum width of a pagination root.
Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
default (md)
none
full
9xs
8xs
7xs
6xs
5xs
4xs
3xs
2xs
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
9xl
<.pagination class="pagination" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-none" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-full" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-9xs" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-8xs" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-7xs" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-6xs" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-5xs" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-4xs" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-3xs" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-2xs" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-xs" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-sm" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-md" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-lg" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-2xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-3xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-4xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-5xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-6xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-7xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-8xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-9xl" count={50} page={3} page_size={10}>
<:prev_trigger><.heroicon name="hero-chevron-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-chevron-right" /></:next_trigger>
<:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>