PageSizeDropdown

Implemented

Inline pagination size selector atom (DS-CORR-11-09). Borderless button trigger (current value + chevron) opening a popover listbox of page sizes. Designed for pagination footers ('Showing [8 v] out of 312'). Full keyboard support: Enter/Space opens, arrows navigate (wrapping), Escape closes, Home/End jump.

Categoryatoms

Sourcesrc/components/atoms/PageSizeDropdown/PageSizeDropdown.tsx

AI HintEmbed in table/pagination footers next to the 'Showing X of Y' label. Pairs with DataTable or Pagination.

Catalog fallback

Live MDX preview not available for PageSizeDropdown. Showing component catalog metadata instead.

Props

Preview

PageSizeDropdown

Prop

Type

Required

Default

Description

value

number

Required

—

Currently selected page size

onChange

(value: number) => void

Required

—

Callback when a size is selected

options

number[]

Optional

[8, 10, 20, 50, 100]

Available page sizes

ariaLabel

string

Optional

'Items per page'

Accessible label for the listbox

prefixLabel

string

Optional

—

Optional static text rendered before the trigger

disabled

boolean

Optional

false

Disable the trigger

Quick use:<PageSizeDropdown />

Accessibility

ARIA rolelistbox (popover)

Usage

Import

tsxSnippet

import { PageSizeDropdown } from "@epasslive/design-system"

Example 1

tsxSnippet

<PageSizeDropdown value={20} onChange={setPageSize} />