Pagination 🚧

<Stack spacing="10">
	<ButtonGroup size="sm" variant="pagination" spacing="1">
		<Tooltip label="Previous"><IconButton icon={<Icon><path d={mdiChevronLeft} /></Icon>} isDisabled /></Tooltip>
		<Button isActive>1</Button>
		<Button>2</Button>
		<Button>3</Button>
		<Button>4</Button>
		<Tooltip label="Next"><IconButton icon={<Icon><path d={mdiChevronRight} /></Icon>} /></Tooltip>
	</ButtonGroup>
	<ButtonGroup size="sm" variant="pagination" spacing="1">
		<Tooltip label="Previous"><IconButton icon={<Icon><path d={mdiChevronLeft} /></Icon>} /></Tooltip>
		<Button>1</Button>
		<Button>2</Button>
		<Button>3</Button>
		<Button isActive>4</Button>
		<Button>5</Button>
		<Button>6</Button>
		<Button>7</Button>
		<Tooltip label="Next"><IconButton icon={<Icon><path d={mdiChevronRight} /></Icon>} /></Tooltip>
	</ButtonGroup>
	<ButtonGroup size="sm" variant="pagination" spacing="1">
		<Tooltip label="Previous"><IconButton icon={<Icon><path d={mdiChevronLeft} /></Icon>} /></Tooltip>
		<Button>1</Button>
		<Button>2</Button>
		<Button>3</Button>
		<Button isActive>4</Button>
		<Button>5</Button>
		<Button isDisabled>…</Button>
		<Button>8</Button>
		<Tooltip label="Next"><IconButton icon={<Icon><path d={mdiChevronRight} /></Icon>} /></Tooltip>
	</ButtonGroup>
	<ButtonGroup size="sm" variant="pagination" spacing="1">
		<Tooltip label="Previous"><IconButton icon={<Icon><path d={mdiChevronLeft} /></Icon>} /></Tooltip>
		<Button>1</Button>
		<Button>2</Button>
		<Button>3</Button>
		<Button isActive>4</Button>
		<Button>5</Button>
		<Button isDisabled>…</Button>
		<Button>457</Button>
		<Tooltip label="Next"><IconButton icon={<Icon><path d={mdiChevronRight} /></Icon>} /></Tooltip>
	</ButtonGroup>
	<ButtonGroup size="sm" variant="pagination" spacing="1">
		<Tooltip label="Previous"><IconButton icon={<Icon><path d={mdiChevronLeft} /></Icon>} /></Tooltip>
		<Button>1</Button>
		<Button isDisabled>…</Button>
		<Button>4</Button>
		<Button isActive>5</Button>
		<Button>6</Button>
		<Button isDisabled>…</Button>
		<Button>457</Button>
		<Tooltip label="Next"><IconButton icon={<Icon><path d={mdiChevronRight} /></Icon>} /></Tooltip>
	</ButtonGroup>
	<ButtonGroup size="sm" variant="pagination" spacing="1">
		<Tooltip label="Previous"><IconButton icon={<Icon><path d={mdiChevronLeft} /></Icon>} /></Tooltip>
		<Button>1</Button>
		<Button isDisabled>…</Button>
		<Button>97</Button>
		<Button isActive>98</Button>
		<Button>99</Button>
		<Button isDisabled>…</Button>
		<Button>457</Button>
		<Tooltip label="Next"><IconButton icon={<Icon><path d={mdiChevronRight} /></Icon>} /></Tooltip>
	</ButtonGroup>
	<ButtonGroup size="sm" variant="pagination" spacing="1">
		<Tooltip label="Previous"><IconButton icon={<Icon><path d={mdiChevronLeft} /></Icon>} /></Tooltip>
		<Button>1</Button>
		<Button isDisabled>…</Button>
		<Button>98</Button>
		<Button isActive>99</Button>
		<Button>100</Button>
		<Button isDisabled>…</Button>
		<Button>457</Button>
		<Tooltip label="Next"><IconButton icon={<Icon><path d={mdiChevronRight} /></Icon>} /></Tooltip>
	</ButtonGroup>
	<ButtonGroup size="sm" variant="pagination" spacing="1">
		<Tooltip label="Previous"><IconButton icon={<Icon><path d={mdiChevronLeft} /></Icon>} /></Tooltip>
		<Button>1</Button>
		<Button isDisabled>…</Button>
		<Button>452</Button>
		<Button isActive>453</Button>
		<Button>454</Button>
		<Button isDisabled>…</Button>
		<Button>457</Button>
		<Tooltip label="Next"><IconButton icon={<Icon><path d={mdiChevronRight} /></Icon>} /></Tooltip>
	</ButtonGroup>
	<ButtonGroup size="sm" variant="pagination" spacing="1">
		<Tooltip label="Previous"><IconButton icon={<Icon><path d={mdiChevronLeft} /></Icon>} /></Tooltip>
		<Button>1</Button>
		<Button isDisabled>…</Button>
		<Button>453</Button>
		<Button isActive>454</Button>
		<Button>455</Button>
		<Button>456</Button>
		<Button>457</Button>
		<Tooltip label="Next"><IconButton icon={<Icon><path d={mdiChevronRight} /></Icon>} /></Tooltip>
	</ButtonGroup>
</Stack>