Pager · envUI Docs

Import

import { Pager } from '@envsemble/envui';

Usage

<Pager.Root>
  <Pager.Previous href="/guide/projects" icon={<IconArrowBack />}>
    Create a project
  </Pager.Previous>
  <Pager.Next href="/guide/team" icon={<IconArrowForward />}>
    Invite your team
  </Pager.Next>
</Pager.Root>

Pager.Previous and Pager.Next each take an href, which renders through the router link from LinkProvider, the destination's title as children, and an optional decorative icon, such as ArrowBack before the previous title and ArrowForward after the next. On the first or last page, leave one out. aria-label names the landmark where a page has several.

The links alone

<Pager.Next href="/guide/team">Invite your team</Pager.Next>

Pager.Previous and Pager.Next also stand alone, outside Pager.Root, such as one link at the end of an article. Each link's rel is prev or next by default.

Composition

The pager is the nav landmark env-pager; each link is env-pager-link-previous or env-pager-link-next.

Accessibility

You provide

An aria-label that names the sequence where the page has several navigation landmarks.
The routing behind href, through LinkProvider.

envUI provides

A nav landmark named Previous and next content.
Native links with rel="prev" and rel="next", named with their direction, such as Up next Invite your team.
Links at least 2.75 rem tall, and decorative icons hidden.

Props

A centered pair of previous and next destinations in a navigation landmark, its Pager.Previous and Pager.Next children; either one can be left out, and without any it renders nothing.

Prop	Type	Description
`children`	`ReactNode`	Pager.Previous and Pager.Next, in that order; leave one out on the first or the last page of a sequence.
`aria-label`Default `'Previous and next content', or EnvUIProvider's messages.pager.label`	`string`	The navigation landmark's name; give each pager its own where a page has several.

Also accepts the native props of <nav>, such as ref, className and aria-* attributes.

The destination before this one: a native link with rel="prev", its title under the label Previous (EnvUIProvider's messages.pager.previous), and an optional icon before them. It also stands alone, outside Pager.Root.

Prop	Type	Description
`href`required	`string`	The destination; the link renders through the LinkProvider's link component.
`children`required	`ReactNode`	The destination's title, such as the name of the next page. It shows below the direction label, wraps between words, and names the link after the label.
`icon`	`ReactNode`	A decorative icon, such as ArrowBack, before the previous destination's text, or such as ArrowForward, after the next one's; none by default.
`rel`Default `'prev' on Pager.Previous, 'next' on Pager.Next`	`string`	The link's relation to this page.

Also accepts the native props of <a>, such as ref, className and aria-* attributes.

The destination after this one: a native link with rel="next", its title under the label Up next (EnvUIProvider's messages.pager.next), and an optional icon after them. It also stands alone, outside Pager.Root.

Prop	Type	Description
`href`required	`string`	The destination; the link renders through the LinkProvider's link component.
`children`required	`ReactNode`	The destination's title, such as the name of the next page. It shows below the direction label, wraps between words, and names the link after the label.
`icon`	`ReactNode`	A decorative icon, such as ArrowBack, before the previous destination's text, or such as ArrowForward, after the next one's; none by default.
`rel`Default `'prev' on Pager.Previous, 'next' on Pager.Next`	`string`	The link's relation to this page.

Also accepts the native props of <a>, such as ref, className and aria-* attributes.

Part names

Each part's class and state attributes are public and versioned, for an application's CSS to style.

env-pager: The previous and next links.
env-pager-link: One link.
env-pager-link-copy: The column with a link's label and title.
env-pager-link-label: A link's label, Previous or Next.
env-pager-link-next: The link to the next page.
env-pager-link-previous: The link to the previous page.
env-pager-link-title: The title of the page a link leads to.

Strings

EnvUIProvider's messages overrides each, and a component's own label prop wins over it.

messages.pager.label: "Previous and next content" Names the navigation.
messages.pager.previous: "Previous" The caption above the previous link.
messages.pager.next: "Up next" The caption above the next link.

Changelog

1.0.0: DirectionLinks is Pager.Root, and DirectionLink is Pager.Previous or Pager.Next, which no longer take direction. Pager.Root also accepts the two parts as children. DirectionLinkProps and DirectionLinksDestination are Pager.LinkProps, the classes are env-pager and env-pager-link-*, and the page is pager. The direction labels and the landmark's name come from messages.pager, and children render between the previous and next props' links instead of after both.
1.0.0-prerelease.6: Colors under the pointer and while pressed change with --env-motion-ease-enter, rather than easing in slowly, so hover and press show from the first frame.

A link's corners are the large corner of the radius scale, --env-radius-lg, rather than the small one.
1.0.0-prerelease.5: Pager.Root takes its links as Pager.Previous and Pager.Next children alone: the previous and next props are gone.