Page navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.
Attributes
Name
Type
Default
Description
variant
PaginationVariant
numbered
Layout of the controls: page numbers, a "Page 2 of 10" status, or the table-footer row.
page
number
1
The page on show, 1-based. Reflected, and clamped to the available range.
page-size
number
10
Items per page. Together with `total-items` it decides how many pages there are.
total-items
number
0
Total number of items to page through.
total-pages
number
0
Number of pages, when the item count is unknown. Takes precedence over `total-items`.
sibling-count
number
1
How many page numbers are shown on each side of the current page.
boundary-count
number
1
How many page numbers are always shown at each end of the range.
page-size-options
number[]
DEFAULT_PAGE_SIZE_OPTIONS
Rows-per-page choices of the `compact` variant. Empty hides the select.
hide-page-size
boolean
false
Hide the rows-per-page select of the `compact` variant.
hide-range
boolean
false
Hide the range status ("21–30 of 100") of the `compact` variant.
show-first-last
boolean
false
Add first-page and last-page controls around the previous/next pair. Meant for `simple` and `compact`, which show
no page numbers; in the `numbered` variant the pinned boundary numbers already reach both ends, unless
`boundary-count` is `0`.
hide-nav-labels
boolean
false
Keep the previous/next icons but drop their visible text; the accessible name is unchanged.
disabled
boolean
false
Dim every control and ignore interaction.
previous-label
string
Previous
next-label
string
Next
first-label
string
First
last-label
string
Last
page-size-label
string
Rows per page:
Text before the rows-per-page select. A trailing colon is dropped from the select's accessible name.
range-template
string
{start}–{end} of {total}
Range status of the `compact` variant. Placeholders: `{start}`, `{end}`, `{total}`.
page-template
string
Page {page} of {pageCount}
Status of the `simple` variant. Placeholders: `{page}`, `{pageCount}`.
page-label-template
string
Go to page {page}
Accessible name of a page number. Placeholder: `{page}`.
jump-label-template
string
Jump to page {page}, skipping {count} pages
Accessible name of an ellipsis. Placeholders: `{page}` (where it jumps), `{from}`, `{to}`, `{count}` (pages hidden).
aria-label
string
—
Accessible name of the navigation landmark.
Events
Name
Type
Description
page-change
CustomEvent<PageChangeEventDetail>
Fired after the shown page changes, by a control or by a page-size change. `detail.startIndex` / `detail.endIndex` slice the items of the new page.
page-size-change
CustomEvent<PageSizeChangeEventDetail>
Fired after the user picks another rows-per-page value.
PAGER_CONNECT_EVENT
CustomEvent
CSS custom properties
Grouped by the element and state they target. Click a group to collapse it; click a name to copy it.
Name
Type
Default
Description
--c2-pagination--gap
pixel
4px
Space between the controls.
--c2-pagination--section-gap
pixel
24px
Space between the groups of the `compact` variant.
--c2-pagination--justify-content
justify-content
flex-start
Where the controls sit in the host's width.
--c2-pagination__item--min-width
pixel
36px
--c2-pagination__item--height
pixel
36px
--c2-pagination__item--padding-left
padding
8px
--c2-pagination__item--padding-right
padding
8px
--c2-pagination__item--color
color
#18181b
--c2-pagination__item--background-color
color
transparent
--c2-pagination__item--border
border
1px solid transparent
--c2-pagination__item--border-radius
border-radius
8px
--c2-pagination__item--font-size
font-size
14px
--c2-pagination__item--font-weight
font-weight
500
--c2-pagination__item__hover--color
color
#18181b
--c2-pagination__item__hover--background-color
color
#f4f4f5
--c2-pagination__item__hover--border
border
1px solid transparent
--c2-pagination__item__selected--color
color
#18181b
--c2-pagination__item__selected--background-color
color
#ffffff
--c2-pagination__item__selected--border
border
1px solid #e4e4e7
--c2-pagination__item__selected--font-weight
font-weight
500
--c2-pagination__item__focus--outline
outline
2px solid rgba(2, 101, 220, 0.4)
--c2-pagination__item__focus--outline-offset
pixel
1px
--c2-pagination__item__disabled--opacity
opacity
0.38
--c2-pagination__nav--gap
pixel
6px
Space between a previous/next icon and its label.
--c2-pagination__nav--padding-left
padding
10px
--c2-pagination__nav--padding-right
padding
10px
--c2-pagination__nav--color
color
#18181b
--c2-pagination__nav--background-color
color
transparent
--c2-pagination__nav--border
border
1px solid transparent
--c2-pagination__nav--border-radius
border-radius
8px
--c2-pagination__nav--font-size
font-size
14px
--c2-pagination__nav--font-weight
font-weight
500
--c2-pagination__nav__hover--color
color
#18181b
--c2-pagination__nav__hover--background-color
color
#f4f4f5
--c2-pagination__nav__hover--border
border
1px solid transparent
--c2-pagination__icon--size
pixel
16px
--c2-pagination__icon--color
color
—
Defaults to the colour of the control it sits in.
--c2-pagination__ellipsis--color
color
#71717a
--c2-pagination__ellipsis--min-width
pixel
36px
--c2-pagination__label--color
color
#71717a
--c2-pagination__label--font-size
font-size
14px
--c2-pagination__label--font-weight
font-weight
500
--c2-pagination__label--gap
pixel
8px
Space between the rows-per-page label and its select.
--c2-pagination__page-size-list--min-width
pixel
56px
Floor for the rows-per-page dropdown: room for a three-digit option, so a one-digit one does not open a sliver.
Pagination
Page navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.
Attributes
Name
Type
Default
Description
variant
PaginationVariant
numbered
Layout of the controls: page numbers, a "Page 2 of 10" status, or the table-footer row.
page
number
1
The page on show, 1-based. Reflected, and clamped to the available range.
page-size
number
10
Items per page. Together with `total-items` it decides how many pages there are.
total-items
number
0
Total number of items to page through.
total-pages
number
0
Number of pages, when the item count is unknown. Takes precedence over `total-items`.
sibling-count
number
1
How many page numbers are shown on each side of the current page.
boundary-count
number
1
How many page numbers are always shown at each end of the range.
page-size-options
number[]
DEFAULT_PAGE_SIZE_OPTIONS
Rows-per-page choices of the `compact` variant. Empty hides the select.
hide-page-size
boolean
false
Hide the rows-per-page select of the `compact` variant.
hide-range
boolean
false
Hide the range status ("21–30 of 100") of the `compact` variant.
show-first-last
boolean
false
Add first-page and last-page controls around the previous/next pair. Meant for `simple` and `compact`, which show
no page numbers; in the `numbered` variant the pinned boundary numbers already reach both ends, unless
`boundary-count` is `0`.
hide-nav-labels
boolean
false
Keep the previous/next icons but drop their visible text; the accessible name is unchanged.
disabled
boolean
false
Dim every control and ignore interaction.
previous-label
string
Previous
next-label
string
Next
first-label
string
First
last-label
string
Last
page-size-label
string
Rows per page:
Text before the rows-per-page select. A trailing colon is dropped from the select's accessible name.
range-template
string
{start}–{end} of {total}
Range status of the `compact` variant. Placeholders: `{start}`, `{end}`, `{total}`.
page-template
string
Page {page} of {pageCount}
Status of the `simple` variant. Placeholders: `{page}`, `{pageCount}`.
page-label-template
string
Go to page {page}
Accessible name of a page number. Placeholder: `{page}`.
jump-label-template
string
Jump to page {page}, skipping {count} pages
Accessible name of an ellipsis. Placeholders: `{page}` (where it jumps), `{from}`, `{to}`, `{count}` (pages hidden).
aria-label
string
—
Accessible name of the navigation landmark.
Events
Name
Type
Description
page-change
CustomEvent<PageChangeEventDetail>
Fired after the shown page changes, by a control or by a page-size change. `detail.startIndex` / `detail.endIndex` slice the items of the new page.
page-size-change
CustomEvent<PageSizeChangeEventDetail>
Fired after the user picks another rows-per-page value.
PAGER_CONNECT_EVENT
CustomEvent
CSS custom properties
Grouped by the element and state they target. Click a group to collapse it; click a name to copy it.
Name
Type
Default
Description
--c2-pagination--gap
pixel
4px
Space between the controls.
--c2-pagination--section-gap
pixel
24px
Space between the groups of the `compact` variant.
--c2-pagination--justify-content
justify-content
flex-start
Where the controls sit in the host's width.
--c2-pagination__item--min-width
pixel
36px
--c2-pagination__item--height
pixel
36px
--c2-pagination__item--padding-left
padding
8px
--c2-pagination__item--padding-right
padding
8px
--c2-pagination__item--color
color
#18181b
--c2-pagination__item--background-color
color
transparent
--c2-pagination__item--border
border
1px solid transparent
--c2-pagination__item--border-radius
border-radius
8px
--c2-pagination__item--font-size
font-size
14px
--c2-pagination__item--font-weight
font-weight
500
--c2-pagination__item__hover--color
color
#18181b
--c2-pagination__item__hover--background-color
color
#f4f4f5
--c2-pagination__item__hover--border
border
1px solid transparent
--c2-pagination__item__selected--color
color
#18181b
--c2-pagination__item__selected--background-color
color
#ffffff
--c2-pagination__item__selected--border
border
1px solid #e4e4e7
--c2-pagination__item__selected--font-weight
font-weight
500
--c2-pagination__item__focus--outline
outline
2px solid rgba(2, 101, 220, 0.4)
--c2-pagination__item__focus--outline-offset
pixel
1px
--c2-pagination__item__disabled--opacity
opacity
0.38
--c2-pagination__nav--gap
pixel
6px
Space between a previous/next icon and its label.
--c2-pagination__nav--padding-left
padding
10px
--c2-pagination__nav--padding-right
padding
10px
--c2-pagination__nav--color
color
#18181b
--c2-pagination__nav--background-color
color
transparent
--c2-pagination__nav--border
border
1px solid transparent
--c2-pagination__nav--border-radius
border-radius
8px
--c2-pagination__nav--font-size
font-size
14px
--c2-pagination__nav--font-weight
font-weight
500
--c2-pagination__nav__hover--color
color
#18181b
--c2-pagination__nav__hover--background-color
color
#f4f4f5
--c2-pagination__nav__hover--border
border
1px solid transparent
--c2-pagination__icon--size
pixel
16px
--c2-pagination__icon--color
color
—
Defaults to the colour of the control it sits in.
--c2-pagination__ellipsis--color
color
#71717a
--c2-pagination__ellipsis--min-width
pixel
36px
--c2-pagination__label--color
color
#71717a
--c2-pagination__label--font-size
font-size
14px
--c2-pagination__label--font-weight
font-weight
500
--c2-pagination__label--gap
pixel
8px
Space between the rows-per-page label and its select.
--c2-pagination__page-size-list--min-width
pixel
56px
Floor for the rows-per-page dropdown: room for a three-digit option, so a one-digit one does not open a sliver.
escAccordionConnected, animated panels with shared borders and single or multiple expansion.LayoutAvatarImage, initials or icon for a person, with status dot and badge.Data displayBadgeTinted pill for status text, counts and dots, optionally pinned to a corner of another element.Data displayBreadcrumbNavigation trail of link buttons with separators, a current page and optional collapsing.NavigationButtonThemeable button with slots for text, prefix, suffix and running icons.ButtonsButton GroupAttached buttons with shared borders, optionally a segmented control with single or multiple selection.ButtonsCardGroups related content and actions on a single bordered surface.LayoutChat InputAuto-growing message box with a send button for chat interfaces.ChatChat MessageOne chat bubble with avatar, title, timestamp and message body.ChatCheckboxNative checkbox behaviour in a quiet, themeable box with an opt-in hover layer.InputsCode ViewerSyntax-highlighted code with line numbers, copy button and dark mode, powered by shiki.Data displayColor AreaTwo-dimensional area for picking saturation and value of a colour.InputsColor SelectColour swatch that opens a full picker built from area and slider.InputsColor SliderHorizontal slider for choosing a hue from 0 to 360.InputsCopy ButtonButton that copies text to the clipboard — the element it sits in, another element by id, or a literal string.ButtonsDetailsCollapsible disclosure built on native details and summary.LayoutIcon ButtonRound, hoverable button wrapping a slotted SVG icon.ButtonsKbdKeyboard key label for shortcuts and command hints, with the semantics of the native kbd element.Data displayLabelCaption that names and activates the control referenced by its for attribute, with a required marker.InputsLink ButtonText-styled control for link and navigation actions, rendered as a real anchor or a button.NavigationListVertical list container with single or multiple selection.Data displayList ItemSelectable row with icon slots, used on its own or as the option of list and select.Data displayMenuCommands, links, checkboxes and submenus in a popover anchored to a trigger.NavigationModalDialog built on the native dialog element: focus trap, backdrop, Escape, title, body and footer.FeedbackNavigation MenuSite navigation bar whose triggers open panels of links below the header.NavigationOverlayAnchored popup built on the browser Popover API, positioned with floating-ui.FeedbackPaginationPage navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.NavigationProgressLinear progress bar, indeterminate or filling to a value, with an optional label and count.FeedbackRadioRadio options built on native inputs, grouped into one value with keyboard navigation.InputsSelectDropdown that pairs a themeable trigger with an anchored list of c2-list-item options.InputsSeperatorHorizontal or vertical rule with an optional label, for dividing content and toolbars.LayoutSheetDialog pinned to an edge of the screen, for content that complements the page rather than interrupting it.FeedbackSide NavResponsive navigation drawer beside the page: pushes the content on large screens, slides over it with a backdrop on small ones.NavigationSkeletonPlaceholder block standing in for content that has not arrived, in three shapes and three animations.FeedbackSliderRange input with a themeable track, thumb, step ticks and value bubble.InputsSpinnerCircular progress indicator, indeterminate or showing a value, with optional text.FeedbackSwitchOn/off toggle on a native switch input, with label, description and thumb icons.InputsTableVirtualized data grid with declarative columns, sorting, selection, pinning and resizing.Data displayTabsTab strip that shows one content panel at a time.NavigationText FieldSingle-line input with icon slots, clear button, helper and error text, and a character counter.InputsTextareaMultiline text input with resizing, helper and error text, and a character counter.InputsToastNotification cards and a manager for stacked, queued notifications with independent lifetimes.FeedbackTooltipContextual hint shown when its target is hovered or focused, rendered in the top layer.FeedbackFeather Icons287 open-source Feather icons, one web component each.IconsMat Icon2,234 Material Icons ligatures rendered through a single element.IconsPhosphor Icons1,512 flexible icons in six weights, one web component each.IconsThemingTheme every c2n component from a handful of design tokens with @c2n/theme, or reach for any component variable directly.GuideUsing c2n in an applicationThe workflow behind every c2n app: load the theme once, use c2-* tags directly, and turn every repeated pattern into a small variant or composed component.Guide