Pagination (pagination)

Pagination is navigation for paginated content.

🔗 External documentation.

                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object

                      

            id: pagination
label: Pagination
description: 'Pagination is navigation for paginated content.'
group: Navigation
homepage: 'https://designsystem.digital.gov/components/pagination/'
props:
    items:
        id: items
        label: 'Pagination items.'
        description: 'List of pager items. The list is keyed by the following elements: first: Item for the first page; not present on the first page of results. previous: Item for the previous page; not present on the first page of results. next: Item for the next page; not present on the last page of results. last: Item for the last page; not present on the last page of results. pages: List of pages, keyed by page number. List of pages. Each item is an array containing the following elements: href: URL with appropriate query parameters for the item. attributes: A keyed list of HTML attributes for the item. text: The visible text used for the item link, such as Previous or Next.'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': pagination
            items:
                first:
                    link: true
                    attributes:
                        class:
                            - usa-pagination__previous-page
                    url: '#'
                    title: First
                previous:
                    link: true
                    attributes:
                        class:
                            - usa-pagination__previous-page
                    url: '#'
                    title: Previous
                1:
                    url: '#'
                    title: '1'
                2:
                    title: '2'
                3:
                    url: '#'
                    title: '3'
                next:
                    link: true
                    attributes:
                        class:
                            - usa-pagination__next-page
                    url: '#'
                    title: Next
                last:
                    link: true
                    attributes:
                        class:
                            - usa-pagination__next-page
                    url: '#'
                    title: Last