PageButton

Stable
WCAG 2.2 evidence
RTL

One page number of a Pagination or TableFooter. With href it is a React Aria Link (page links for server-rendered or routed pages); without it, a Button (the page changes in place, announced by the parent). The Figma State property maps to isCurrent (aria-current="page"), isDisabled and React Aria's hover, pressed and keyboard-focus attributes. Accessibility: Enter activates links and Enter or Space buttons; keyboard focus shows the Figma 2 px ring (WCAG 2.1.1, 2.4.7); the target is at least 32 px (44 pt, 48 dp on touch platforms, 2.5.8); the current page is announced and shown by fill and weight (1.4.1). Consumer duties: one current page per list, and a name such as "Page 2" through aria-label when the bare number is not enough.

import { PageButton } from "@nexera-ui/react";

Loading example…

7
examples: 23
props: 2
live controls: 1
platform: 9
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

isCurrentfalse

isDisabledfalse

Generated code

import { PageButton } from "@nexera-ui/react";

<PageButton />

Examples 6

The same examples as Storybook, rendered live. Open Code to copy one.

Current

Figma State=Current (isCurrent): aria-current="page", brand/primary fill and a semibold label.

Loading example…

app.tsx

import { PageButton } from "@nexera-ui/react";

<PageButton page={2} aria-label="Page 2" isCurrent />;

Disabled

Figma State=Disabled (isDisabled): inactive, skipped by Tab.

Loading example…

app.tsx

import { PageButton } from "@nexera-ui/react";

<PageButton page={2} aria-label="Page 2" isDisabled />;

As link

With href the same control is a link, for pages that are server-rendered or routed.

Loading example…

app.tsx

import { PageButton } from "@nexera-ui/react";

<PageButton page={2} aria-label="Page 2" href="#page-2" />;

Long numbers

Larger numbers widen the button; the 8 px side padding stays.

Loading example…

app.tsx

import { PageButton } from "@nexera-ui/react";

export function LongNumbers() {
  return (
    <ul className="m-0 flex list-none flex-wrap gap-1 p-0">
      {[9, 10, 99, 1000, 12345].map((page) => (
        <li key={page}>
          <PageButton page={page} aria-label={`Page ${String(page)}`} isCurrent={page === 1000} />
        </li>
      ))}
    </ul>
  );
}

Narrow width

A 320 px column: a long list of page buttons wraps onto further lines instead of overflowing.

Loading example…

app.tsx

import { PageButton } from "@nexera-ui/react";

export function NarrowWidth() {
  return (
    <ul className="m-0 flex max-w-xs list-none flex-wrap gap-1 p-0">
      {Array.from({ length: 20 }, (_, index) => index + 1).map((page) => (
        <li key={page}>
          <PageButton page={page} aria-label={`Page ${String(page)}`} isCurrent={page === 7} />
        </li>
      ))}
    </ul>
  );
}

Right to left

Right to left: the list starts at the right; the digits themselves are unchanged.

Loading example…

app.tsx

import { PageButton } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <ul className="m-0 flex list-none flex-wrap gap-1 p-0">
      {[1, 2, 3].map((page) => (
        <li key={page}>
          <PageButton page={page} aria-label={`صفحة ${String(page)}`} isCurrent={page === 2} />
        </li>
      ))}
    </ul>
  );
}

Props 23

Press "Try it" on a card to load that prop into the playground.

page*Nexera

string | number

The page number or label shown in the button. It names the control unless aria-label is set; a longer name such as "Page 2" must still contain the visible text (WCAG 2.5.3).

isCurrentNexera

boolean

The button is the current page. It gets aria-current="page" and is shown by a brand/primary fill and a semibold label, not by colour alone.

classNameNexera

string

Extra classes, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

isDisabledReact Aria

boolean

Whether the link is disabled.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

hrefReact Aria

string

A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).

hrefLangReact Aria

string

Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).

targetReact Aria

HTMLAttributeAnchorTarget

The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

relReact Aria

string

The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).

downloadReact Aria

string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).

pingReact Aria

string

A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).

referrerPolicyReact Aria

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"

How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).

routerOptionsReact Aria

never

Options for the configured client side router.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

6 direct · 3 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
1.4.11Non-text ContrastLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.4Link Purpose (In Context)Level A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.3Label in NameLevel A · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-current
data-disabled
data-hovered
data-pressed

Usage

<PageButton className="data-current:opacity-90 shadow-sm" />

Used in blocks

No block uses PageButton yet.

Theme studio

PageButton

Try every prop. Copy the code.

Examples 6

Current

Disabled

As link

Long numbers

Narrow width

Right to left

Props 23

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components