ToggleGroupSpacing() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ToggleGroupSpacing() — ui Function Reference

Dependency Diagram

graph TD
  9e58114c_eba2_5ad2_79e6_049d7f997090["ToggleGroupSpacing()"]
  fef78158_0e8d_0f9b_39fc_a9d4bd24b8ac["toggle-group-spacing.tsx"]
  9e58114c_eba2_5ad2_79e6_049d7f997090 -->|defined in| fef78158_0e8d_0f9b_39fc_a9d4bd24b8ac
  style 9e58114c_eba2_5ad2_79e6_049d7f997090 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/toggle-group-spacing.tsx lines 3–26

export function ToggleGroupSpacing() {
  return (
    <ToggleGroup
      type="single"
      size="sm"
      defaultValue="top"
      variant="outline"
      spacing={2}
    >
      <ToggleGroupItem value="top" aria-label="Toggle top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
        Bottom
      </ToggleGroupItem>
      <ToggleGroupItem value="left" aria-label="Toggle left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Toggle right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
  )
}