ButtonGroupPagination() — ui Function Reference

Architecture documentation for the ButtonGroupPagination() function in button-group-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ButtonGroupPagination() — ui Function Reference

Dependency Diagram

graph TD
  cf4613ac_3929_1552_9191_50b54dda74f2["ButtonGroupPagination()"]
  2a9b7ea2_138d_8063_c68e_fb0dd1342c8c["button-group-example.tsx"]
  cf4613ac_3929_1552_9191_50b54dda74f2 -->|defined in| 2a9b7ea2_138d_8063_c68e_fb0dd1342c8c
  style cf4613ac_3929_1552_9191_50b54dda74f2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/button-group-example.tsx lines 468–512

function ButtonGroupPagination() {
  return (
    <Example title="Pagination">
      <ButtonGroup>
        <Button variant="outline" size="sm">
          <IconPlaceholder
            lucide="ArrowLeftIcon"
            tabler="IconArrowLeft"
            hugeicons="ArrowLeft01Icon"
            phosphor="ArrowLeftIcon"
            remixicon="RiArrowLeftLine"
            data-icon="inline-start"
          />
          Previous
        </Button>
        <Button variant="outline" size="sm">
          1
        </Button>
        <Button variant="outline" size="sm">
          2
        </Button>
        <Button variant="outline" size="sm">
          3
        </Button>
        <Button variant="outline" size="sm">
          4
        </Button>
        <Button variant="outline" size="sm">
          5
        </Button>
        <Button variant="outline" size="sm">
          Next
          <IconPlaceholder
            lucide="ArrowRightIcon"
            tabler="IconArrowRight"
            hugeicons="ArrowRight01Icon"
            phosphor="ArrowRightIcon"
            remixicon="RiArrowRightLine"
            data-icon="inline-end"
          />
        </Button>
      </ButtonGroup>
    </Example>
  )
}