Toggle Group

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

"use client";

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

export function ToggleGroupDemo() {
  return (
    <ToggleGroup.Root multiple={false}>
      <ToggleGroup.Item value="star" aria-label="Toggle star">
        <CentralIcon radius="1" stroke="1.5" fill="outlined" name="IconStar" />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="heart" aria-label="Toggle heart">
        <CentralIcon radius="1" stroke="1.5" fill="outlined" name="IconHeart" />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="bookmark" aria-label="Toggle bookmark">
        <CentralIcon
          radius="1"
          stroke="1.5"
          fill="outlined"
          name="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>