PaginationIconsOnly() — ui Function Reference

Architecture documentation for the PaginationIconsOnly() function in pagination-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ PaginationIconsOnly() — ui Function Reference

Dependency Diagram

graph TD
  b4d0a2ed_d178_7f01_c359_e718622e91e1["PaginationIconsOnly()"]
  242cf6d8_114e_83ed_2ff8_fb58cc873ff8["pagination-example.tsx"]
  b4d0a2ed_d178_7f01_c359_e718622e91e1 -->|defined in| 242cf6d8_114e_83ed_2ff8_fb58cc873ff8
  style b4d0a2ed_d178_7f01_c359_e718622e91e1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/pagination-example.tsx lines 93–126

function PaginationIconsOnly() {
  return (
    <Example title="With Select">
      <div className="flex items-center justify-between gap-4">
        <Field orientation="horizontal" className="w-fit">
          <FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>
          <Select defaultValue="25">
            <SelectTrigger className="w-20" id="select-rows-per-page">
              <SelectValue />
            </SelectTrigger>
            <SelectContent align="start">
              <SelectGroup>
                <SelectItem value="10">10</SelectItem>
                <SelectItem value="25">25</SelectItem>
                <SelectItem value="50">50</SelectItem>
                <SelectItem value="100">100</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </Field>
        <Pagination className="mx-0 w-auto">
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious href="#" />
            </PaginationItem>
            <PaginationItem>
              <PaginationNext href="#" />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </div>
    </Example>
  )
}