Toggle Group

A set of two-state buttons that can be toggled on or off.

"use client";

import { IconBookmark } from "@smartacteam/ambient-web/icons/medium/icon-bookmark";
import { IconHeart } from "@smartacteam/ambient-web/icons/medium/icon-heart";
import { IconStar } from "@smartacteam/ambient-web/icons/medium/icon-star";
import { ToggleGroup } from "@smartacteam/ambient-web/toggle-group";

export function ToggleGroupDemo() {
  return (
    <ToggleGroup.Root multiple={false}>
      <ToggleGroup.Item value="star" aria-label="Toggle star">
        <IconStar />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="heart" aria-label="Toggle heart">
        <IconHeart />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="bookmark" aria-label="Toggle bookmark">
        <IconBookmark />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}

Usage

import { ToggleGroup } from "@smartacteam/ambient-web/toggle-group";

<ToggleGroup.Group type="multiple">
  <ToggleGroup.Item value="a">A</ToggleGroup.Item>
  <ToggleGroup.Item value="b">B</ToggleGroup.Item>
  <ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.Group>