Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Overview
Accordion
Badge
Breadcrumb
Button
Gradient Button
FAB
Icon Button
Card
Checkbox
Chips
Date Picker
Dialogs
Divider
List
Loading
Menu
Options
Pagination
Radio
Scrollbar
Search
Selector
Skeleton
Slider
Swiper
Switch
Tabs
Text Field
TextArea
Toast
Tooltip

PAGINATION

PreviousOptions
RadioNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

When to Use

Example: table footer

123…10
  • Paginated lists, tables, or search results
  • When data sets are too large to display on a single page
  • When users need to navigate between discrete pages of content

Usage Guidelines

DO

Use brand style for primary navigation, default for secondary contexts. Set siblings to control how many page numbers appear around the current page. Use simple mode for mobile layouts

Don’t

Don't use pagination when infinite scroll is more appropriate. Don't show pagination for single-page results

Accessibility

  • Root element: <nav role="navigation" aria-label="Pagination">
  • Current page button: aria-current="page"
  • Previous / Next buttons: aria-label="Previous page" / aria-label="Next page"
  • disabled attribute prevents pointer events automatically
  • Full keyboard navigation with focus-visible ring