ToggleGroupSort() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ToggleGroupSort() — ui Function Reference

Dependency Diagram

graph TD
  21d01964_84c1_a77e_8106_966668a4c869["ToggleGroupSort()"]
  9d75b38c_5fd6_f22c_f903_b0d70c7a92d2["toggle-group-example.tsx"]
  21d01964_84c1_a77e_8106_966668a4c869 -->|defined in| 9d75b38c_5fd6_f22c_f903_b0d70c7a92d2
  style 21d01964_84c1_a77e_8106_966668a4c869 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/toggle-group-example.tsx lines 306–348

function ToggleGroupSort() {
  return (
    <Example title="Sort">
      <ToggleGroup
        type="single"
        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>
  )
}