function Pagination(props) {
    const { pages, activePage, onChange, className, style, variant } = props;

    const isFirstItemSelected = activePage === 1;
    const isLastItemSelected = activePage === pages;

    return (
        <StyledNav className={className} aria-label="pagination" style={style}>
            <StyledPaginationContainer>
                <NavigationButton
                    dataId="previous-page-button"
                    icon={<LeftArrow />}
                    onClick={event => onChange(event, activePage - 1)}
                    disabled={isFirstItemSelected}
                    ariaLabel="Goto Previous Page"
                    variant={variant}
                />
                <PageButtonsContainer
                    onChange={onChange}
                    pages={pages}
                    activePage={activePage}
                    variant={variant}
                />
                <NavigationButton
                    dataId="next-page-button"
                    icon={<RightArrow />}
                    onClick={event => onChange(event, activePage + 1)}
                    disabled={isLastItemSelected}
                    ariaLabel="Goto Next Page"
                    variant={variant}
                />
            </StyledPaginationContainer>
        </StyledNav>
    );
}
The Pagination component shows you the pagination options for dividing content into pages.
It is very useful when you want to display a large recordset on multiple pages.
@category Layout