ButtonGroupPagination() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ButtonGroupPagination() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/button-group-example.tsx lines 484–528

function ButtonGroupPagination() {
  return (
    <Example title="Pagination">
      <ButtonGroup>
        <Button variant="outline" size="sm">
          <IconPlaceholder
            lucide="ArrowLeftIcon"
            tabler="IconArrowLeft"
            hugeicons="ArrowLeft02Icon"
            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="ArrowRight02Icon"
            phosphor="ArrowRightIcon"
            remixicon="RiArrowRightLine"
            data-icon="inline-end"
          />
        </Button>
      </ButtonGroup>
    </Example>
  )
}