ToggleGroupSort() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ToggleGroupSort() — ui Function Reference

Dependency Diagram

graph TD
  6c22b253_75df_d73e_7e1d_8f820d73d8b1["ToggleGroupSort()"]
  7cfec362_e6dc_17ef_efcb_b8f12bc65346["toggle-group-example.tsx"]
  6c22b253_75df_d73e_7e1d_8f820d73d8b1 -->|defined in| 7cfec362_e6dc_17ef_efcb_b8f12bc65346
  style 6c22b253_75df_d73e_7e1d_8f820d73d8b1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/toggle-group-example.tsx lines 299–336

function ToggleGroupSort() {
  return (
    <Example title="Sort">
      <ToggleGroup defaultValue={["newest"]} variant="outline" size="sm">
        <ToggleGroupItem value="newest" aria-label="Newest">
          <IconPlaceholder
            lucide="ArrowDownIcon"
            tabler="IconArrowDown"
            hugeicons="ArrowDownIcon"
            phosphor="ArrowDownIcon"
            remixicon="RiArrowDownLine"
          />
          Newest
        </ToggleGroupItem>
        <ToggleGroupItem value="oldest" aria-label="Oldest">
          <IconPlaceholder
            lucide="ArrowUpIcon"
            tabler="IconArrowUp"
            hugeicons="ArrowUpIcon"
            phosphor="ArrowUpIcon"
            remixicon="RiArrowUpLine"
          />
          Oldest
        </ToggleGroupItem>
        <ToggleGroupItem value="popular" aria-label="Popular">
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="TradeUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiLineChartLine"
          />
          Popular
        </ToggleGroupItem>
      </ToggleGroup>
    </Example>
  )
}