ToggleGroupWithIcons() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ToggleGroupWithIcons() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/toggle-group-example.tsx lines 207–256

function ToggleGroupWithIcons() {
  return (
    <Example title="With Icons">
      <ToggleGroup type="multiple" variant="outline" spacing={1} size="sm">
        <ToggleGroupItem
          value="star"
          aria-label="Toggle star"
          className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent"
        >
          <IconPlaceholder
            lucide="StarIcon"
            tabler="IconStar"
            hugeicons="StarIcon"
            phosphor="StarIcon"
            remixicon="RiStarLine"
          />
          Star
        </ToggleGroupItem>
        <ToggleGroupItem
          value="heart"
          aria-label="Toggle heart"
          className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
        >
          <IconPlaceholder
            lucide="HeartIcon"
            tabler="IconHeart"
            hugeicons="FavouriteIcon"
            phosphor="HeartIcon"
            remixicon="RiHeartLine"
          />
          Heart
        </ToggleGroupItem>
        <ToggleGroupItem
          value="bookmark"
          aria-label="Toggle bookmark"
          className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
        >
          <IconPlaceholder
            lucide="BookmarkIcon"
            tabler="IconBookmark"
            hugeicons="BookmarkIcon"
            phosphor="BookmarkIcon"
            remixicon="RiBookmarkLine"
          />
          Bookmark
        </ToggleGroupItem>
      </ToggleGroup>
    </Example>
  )
}