lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Pagination

The Pagination component is used to navigate through a large number of pages. It allows users to easily switch between pages by clicking on page numbers or navigating to the first, previous, next, or last page.

Example

/ 3
code
<script type="module">
  import '@blueprintui/components/include/pagination.js';
</script>

<bp-pagination aria-label="pagination">
  <bp-button-icon slot="first"></bp-button-icon>
  <bp-button-icon slot="prev"></bp-button-icon>
  <bp-field novalidate>
    <bp-input type="number" value="1" size="2" min="1" max="99" aria-label="current page"></bp-input>
    <bp-field-message>/ 3</bp-field-message>
  </bp-field>
  <bp-button-icon slot="next"></bp-button-icon>
  <bp-button-icon slot="last"></bp-button-icon>
</bp-pagination>

Basic

code
<script type="module">
  import '@blueprintui/components/include/pagination.js';
</script>

<bp-pagination aria-label="pagination">
  <bp-button-icon slot="prev"></bp-button-icon>
  <bp-button-icon slot="next"></bp-button-icon>
</bp-pagination>

Basic Pagination Number

1 / 3
code
<script type="module">
  import '@blueprintui/components/include/pagination.js';
</script>

<bp-pagination aria-label="pagination">
  <bp-button-icon slot="prev" action="flat"></bp-button-icon>
  <span aria-label="current page">1 / 3</span>
  <bp-button-icon slot="next" action="flat"></bp-button-icon>
</bp-pagination>

First And Last

1 / 3
code
<script type="module">
  import '@blueprintui/components/include/pagination.js';
</script>

<bp-pagination aria-label="pagination">
  <bp-button-icon slot="first"></bp-button-icon>
  <bp-button-icon slot="prev"></bp-button-icon>
  <span aria-label="current page">1 / 3</span>
  <bp-button-icon slot="next"></bp-button-icon>
  <bp-button-icon slot="last"></bp-button-icon>
</bp-pagination>

Input Interactive

Submit 1
code
<form id="pagination-form" bp-layout="block gap:md">
  <bp-pagination-input name="pagination" value="1" max="500" size="10" size-options="[10, 50, 100]"></bp-pagination-input>
  <bp-button type="submit" action="secondary">Submit <span>1</span></bp-button>
</form>
<script type="module">
  import '@blueprintui/components/include/button.js';
  import '@blueprintui/components/include/pagination.js';
  const form = document.querySelector('#pagination-form');
  const pagination = document.querySelector('#pagination-form bp-pagination-input');
  pagination.addEventListener('change', (e) => (document.querySelector('#pagination-form span').innerHTML = e.target.value));
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('submit', Object.fromEntries(new FormData(form)));
  });
</script>

The pagination input is a form control type that can be used within forms providing a input, change and compatible with FormData.

Install

NPM

// npm package
import '@blueprintui/components/include/pagination.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/pagination.js/+esm';
</script>

Accessibility

  • The Pagination component should be keyboard accessible and support keyboard navigation.
  • The Pagination buttons should have appropriate aria-labels that describe each action.

bp-pagination

Properties

NameTypesDescription
accessorset default aria/i18n strings
i18n

Attributes

NameTypesDescription
accessorset default aria/i18n strings

CSS Properties

NameTypesDescription
--gap

Slots

NameTypesDescription
default
first
next
prev
last