Toggle Group

A set of toggle buttons where one or more can be active at a time.

View source

import type { JSX } from "solid-js"
import * as ToggleGroup from "@danielfrg/solid-ui/toggle-group"
import styles from "./index.module.css"

export function DemoToggleGroupHero() {
  return (
    <ToggleGroup.Root defaultValue="left" class={styles.panel}>
      <ToggleGroup.Item aria-label="Align left" value="left" class={styles.button}>
        <AlignLeftIcon class={styles.icon} />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Align center" value="center" class={styles.button}>
        <AlignCenterIcon class={styles.icon} />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Align right" value="right" class={styles.button}>
        <AlignRightIcon class={styles.icon} />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

function AlignLeftIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentcolor" stroke-linecap="round" {...props}>
      <path d="M2.5 3.5H13.5" />
      <path d="M2.5 9.5H13.5" />
      <path d="M2.5 6.5H10.5" />
      <path d="M2.5 12.5H10.5" />
    </svg>
  )
}

function AlignCenterIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentcolor" stroke-linecap="round" {...props}>
      <path d="M3 3.5H14" />
      <path d="M3 9.5H14" />
      <path d="M4.5 6.5H12.5" />
      <path d="M4.5 12.5H12.5" />
    </svg>
  )
}

function AlignRightIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentcolor" stroke-linecap="round" {...props}>
      <path d="M2.5 3.5H13.5" />
      <path d="M2.5 9.5H13.5" />
      <path d="M5.5 6.5H13.5" />
      <path d="M5.5 12.5H13.5" />
    </svg>
  )
}

.panel {
  display: flex;
  gap: 1px;
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
  border-radius: 0.375rem;
  padding: 0.125rem;
}

.button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  outline: 0;
  border: 0;
  border-radius: 0.25rem;
  background-color: transparent;
  color: var(--color-gray-600);
  user-select: none;
  cursor: pointer;
}

.button:focus-visible {
  background-color: transparent;
  outline: 2px solid var(--color-blue);
  outline-offset: -1px;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

.button:active {
  background-color: var(--color-gray-200);
}

.button[data-pressed] {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.icon {
  width: 1rem;
  height: 1rem;
}

.status {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Examples

Default value

Use defaultValue to set the initially active item without controlling the state.

View source

import type { JSX } from "solid-js"
import * as ToggleGroup from "@danielfrg/solid-ui/toggle-group"
import styles from "./index.module.css"

export function DemoToggleGroupDefaultValue() {
  return (
    <ToggleGroup.Root defaultValue="bold" class={styles.panel}>
      <ToggleGroup.Item aria-label="Bold" value="bold" class={styles.button}>
        <BoldIcon class={styles.icon} />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Italic" value="italic" class={styles.button}>
        <ItalicIcon class={styles.icon} />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Underline" value="underline" class={styles.button}>
        <UnderlineIcon class={styles.icon} />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

function BoldIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" {...props}>
      <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
    </svg>
  )
}

function ItalicIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" {...props}>
      <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.63835 2.13332 6.39995 2.37225 6.39995 2.66665C6.39995 2.96105 6.63835 3.19999 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.57168 12.8 5.33328 13.0389 5.33328 13.3333C5.33328 13.6277 5.57168 13.8667 5.86661 13.8667H9.06661C9.36155 13.8667 9.59995 13.6277 9.59995 13.3333C9.59995 13.0389 9.36155 12.8 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.4282 3.19999 10.6666 2.96105 10.6666 2.66665C10.6666 2.37225 10.4282 2.13332 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
    </svg>
  )
}

function UnderlineIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" {...props}>
      <path d="M3.73331 2.13332C3.43838 2.13332 3.19998 2.37225 3.19998 2.66666C3.19998 2.96106 3.43838 3.19999 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.5616 3.19999 12.8 2.96106 12.8 2.66666C12.8 2.37225 12.5616 2.13332 12.2666 2.13332H10.1333C9.83838 2.13332 9.59998 2.37225 9.59998 2.66666C9.59998 2.96106 9.83838 3.19999 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C6.16158 3.19999 6.39998 2.96106 6.39998 2.66666C6.39998 2.37225 6.16158 2.13332 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.43838 13.3333 3.19998 13.5723 3.19998 13.8667C3.19998 14.1611 3.43838 14.4 3.73331 14.4H12.2666C12.5616 14.4 12.8 14.1611 12.8 13.8667C12.8 13.5723 12.5616 13.3333 12.2666 13.3333H3.73331Z" />
    </svg>
  )
}

.panel {
  display: flex;
  gap: 1px;
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
  border-radius: 0.375rem;
  padding: 0.125rem;
}

.button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  outline: 0;
  border: 0;
  border-radius: 0.25rem;
  background-color: transparent;
  color: var(--color-gray-600);
  user-select: none;
  cursor: pointer;
}

.button:focus-visible {
  background-color: transparent;
  outline: 2px solid var(--color-blue);
  outline-offset: -1px;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

.button:active {
  background-color: var(--color-gray-200);
}

.button[data-pressed] {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.icon {
  width: 1rem;
  height: 1rem;
}

.status {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Controlled

Use value and onChange to control the active item externally.

Active: bold

View source

import { createSignal } from "solid-js"
import type { JSX } from "solid-js"
import * as ToggleGroup from "@danielfrg/solid-ui/toggle-group"
import styles from "./index.module.css"

export function DemoToggleGroupControlled() {
  const [value, setValue] = createSignal("bold")

  return (
    <div>
      <ToggleGroup.Root value={value()} onChange={setValue} class={styles.panel}>
        <ToggleGroup.Item aria-label="Bold" value="bold" class={styles.button}>
          <BoldIcon class={styles.icon} />
        </ToggleGroup.Item>
        <ToggleGroup.Item aria-label="Italic" value="italic" class={styles.button}>
          <ItalicIcon class={styles.icon} />
        </ToggleGroup.Item>
        <ToggleGroup.Item aria-label="Underline" value="underline" class={styles.button}>
          <UnderlineIcon class={styles.icon} />
        </ToggleGroup.Item>
      </ToggleGroup.Root>
      <p class={styles.status}>Active: {value() || "none"}</p>
    </div>
  )
}

function BoldIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" {...props}>
      <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
    </svg>
  )
}

function ItalicIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" {...props}>
      <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.63835 2.13332 6.39995 2.37225 6.39995 2.66665C6.39995 2.96105 6.63835 3.19999 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.57168 12.8 5.33328 13.0389 5.33328 13.3333C5.33328 13.6277 5.57168 13.8667 5.86661 13.8667H9.06661C9.36155 13.8667 9.59995 13.6277 9.59995 13.3333C9.59995 13.0389 9.36155 12.8 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.4282 3.19999 10.6666 2.96105 10.6666 2.66665C10.6666 2.37225 10.4282 2.13332 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
    </svg>
  )
}

function UnderlineIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" {...props}>
      <path d="M3.73331 2.13332C3.43838 2.13332 3.19998 2.37225 3.19998 2.66666C3.19998 2.96106 3.43838 3.19999 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.5616 3.19999 12.8 2.96106 12.8 2.66666C12.8 2.37225 12.5616 2.13332 12.2666 2.13332H10.1333C9.83838 2.13332 9.59998 2.37225 9.59998 2.66666C9.59998 2.96106 9.83838 3.19999 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C6.16158 3.19999 6.39998 2.96106 6.39998 2.66666C6.39998 2.37225 6.16158 2.13332 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.43838 13.3333 3.19998 13.5723 3.19998 13.8667C3.19998 14.1611 3.43838 14.4 3.73331 14.4H12.2666C12.5616 14.4 12.8 14.1611 12.8 13.8667C12.8 13.5723 12.5616 13.3333 12.2666 13.3333H3.73331Z" />
    </svg>
  )
}

.panel {
  display: flex;
  gap: 1px;
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
  border-radius: 0.375rem;
  padding: 0.125rem;
}

.button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  outline: 0;
  border: 0;
  border-radius: 0.25rem;
  background-color: transparent;
  color: var(--color-gray-600);
  user-select: none;
  cursor: pointer;
}

.button:focus-visible {
  background-color: transparent;
  outline: 2px solid var(--color-blue);
  outline-offset: -1px;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

.button:active {
  background-color: var(--color-gray-200);
}

.button[data-pressed] {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.icon {
  width: 1rem;
  height: 1rem;
}

.status {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Multiple selection

Use the multiple prop to allow more than one item to be active simultaneously.

View source

import type { JSX } from "solid-js"
import * as ToggleGroup from "@danielfrg/solid-ui/toggle-group"
import styles from "./index.module.css"

export function DemoToggleGroupMultiple() {
  return (
    <ToggleGroup.Root multiple defaultValue={["bold", "underline"]} class={styles.panel}>
      <ToggleGroup.Item aria-label="Bold" value="bold" class={styles.button}>
        <BoldIcon class={styles.icon} />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Italic" value="italic" class={styles.button}>
        <ItalicIcon class={styles.icon} />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Underline" value="underline" class={styles.button}>
        <UnderlineIcon class={styles.icon} />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

function BoldIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" {...props}>
      <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
    </svg>
  )
}

function ItalicIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" {...props}>
      <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.63835 2.13332 6.39995 2.37225 6.39995 2.66665C6.39995 2.96105 6.63835 3.19999 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.57168 12.8 5.33328 13.0389 5.33328 13.3333C5.33328 13.6277 5.57168 13.8667 5.86661 13.8667H9.06661C9.36155 13.8667 9.59995 13.6277 9.59995 13.3333C9.59995 13.0389 9.36155 12.8 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.4282 3.19999 10.6666 2.96105 10.6666 2.66665C10.6666 2.37225 10.4282 2.13332 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
    </svg>
  )
}

function UnderlineIcon(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentcolor" {...props}>
      <path d="M3.73331 2.13332C3.43838 2.13332 3.19998 2.37225 3.19998 2.66666C3.19998 2.96106 3.43838 3.19999 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.5616 3.19999 12.8 2.96106 12.8 2.66666C12.8 2.37225 12.5616 2.13332 12.2666 2.13332H10.1333C9.83838 2.13332 9.59998 2.37225 9.59998 2.66666C9.59998 2.96106 9.83838 3.19999 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C6.16158 3.19999 6.39998 2.96106 6.39998 2.66666C6.39998 2.37225 6.16158 2.13332 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.43838 13.3333 3.19998 13.5723 3.19998 13.8667C3.19998 14.1611 3.43838 14.4 3.73331 14.4H12.2666C12.5616 14.4 12.8 14.1611 12.8 13.8667C12.8 13.5723 12.5616 13.3333 12.2666 13.3333H3.73331Z" />
    </svg>
  )
}

.panel {
  display: flex;
  gap: 1px;
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
  border-radius: 0.375rem;
  padding: 0.125rem;
}

.button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  outline: 0;
  border: 0;
  border-radius: 0.25rem;
  background-color: transparent;
  color: var(--color-gray-600);
  user-select: none;
  cursor: pointer;
}

.button:focus-visible {
  background-color: transparent;
  outline: 2px solid var(--color-blue);
  outline-offset: -1px;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

.button:active {
  background-color: var(--color-gray-200);
}

.button[data-pressed] {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.icon {
  width: 1rem;
  height: 1rem;
}

.status {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}