@amsterdam/design-system-react/dist/Pagination/Pagination.d.ts

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes } from 'react';
export type PaginationProps = {
    /** The React component to use for the links. */
    linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
    /** The template used to construct the link hrefs. */
    linkTemplate: (page: number) => string;
    /** The maximum amount of pages shown. Minimum value: 5. */
    maxVisiblePages?: number;
    /** The visible label for the link to the next page. */
    nextLabel?: string;
    /** The accessible name for the link to the next page. */
    nextVisuallyHiddenLabel?: string;
    /** The current page number. */
    page?: number;
    /** The visible label for the link to the previous page. */
    previousLabel?: string;
    /** The accessible name for the link to the previous page. */
    previousVisuallyHiddenLabel?: string;
    /** The total amount of pages. */
    totalPages: number;
    /** The accessible name for the Pagination component. */
    visuallyHiddenLabel?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    visuallyHiddenLabelId?: string;
} & HTMLAttributes<HTMLElement>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
 */
export declare const Pagination: import("react").ForwardRefExoticComponent<{
    /** The React component to use for the links. */
    linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
    /** The template used to construct the link hrefs. */
    linkTemplate: (page: number) => string;
    /** The maximum amount of pages shown. Minimum value: 5. */
    maxVisiblePages?: number;
    /** The visible label for the link to the next page. */
    nextLabel?: string;
    /** The accessible name for the link to the next page. */
    nextVisuallyHiddenLabel?: string;
    /** The current page number. */
    page?: number;
    /** The visible label for the link to the previous page. */
    previousLabel?: string;
    /** The accessible name for the link to the previous page. */
    previousVisuallyHiddenLabel?: string;
    /** The total amount of pages. */
    totalPages: number;
    /** The accessible name for the Pagination component. */
    visuallyHiddenLabel?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    visuallyHiddenLabelId?: string;
} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;