ToggleButton

import { ToggleButton } from "@grassroot/ui-react";
const toggleButtonFixture = {
  id: "toggle-button",
  label: "Notifications",
  defaultPressed: true,
} satisfies {
  id: string;
  label: string;
  defaultPressed: boolean;
};
 
export default function ToggleButtonDemo() {
  return (
    <ToggleButton defaultPressed={toggleButtonFixture.defaultPressed}>
      {toggleButtonFixture.label}
    </ToggleButton>
  );
}

<script setup lang="ts">
import { ToggleButton } from "@grassroot/ui-vue";
const toggleButtonFixture = {
  id: "toggle-button",
  label: "Notifications",
  defaultPressed: true,
} satisfies {
  id: string;
  label: string;
  defaultPressed: boolean;
};
 
</script>
 
<template>
  <ToggleButton :default-pressed="toggleButtonFixture.defaultPressed" @update:pressed="() => {}">
    {{ toggleButtonFixture.label }}
  </ToggleButton>
</template>

import { Component } from "@angular/core";
const toggleButtonFixture = {
  id: "toggle-button",
  label: "Notifications",
  defaultPressed: true,
} satisfies {
  id: string;
  label: string;
  defaultPressed: boolean;
};
 
import { GrassrootToggleButton } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-toggle-button-demo",
  standalone: true,
  imports: [GrassrootToggleButton],
  host: { style: "display: contents" },
  template: `
    <grassroot-toggle-button [defaultPressed]="fixture.defaultPressed">{{
      fixture.label
    }}</grassroot-toggle-button>
  `,
})
export class ToggleButtonDemoComponent {
  protected readonly fixture = toggleButtonFixture;
}
 
export default ToggleButtonDemoComponent;

<script lang="ts">
  import { ToggleButton } from "@grassroot/ui-svelte";
  const toggleButtonFixture = {
    id: "toggle-button",
    label: "Notifications",
    defaultPressed: true,
  } satisfies {
    id: string;
    label: string;
    defaultPressed: boolean;
  };
 
  </script>
 
<ToggleButton defaultPressed={toggleButtonFixture.defaultPressed}>
  {toggleButtonFixture.label}
</ToggleButton>

/** @jsxImportSource solid-js */
import { ToggleButton } from "@grassroot/ui-solid";
const toggleButtonFixture = {
  id: "toggle-button",
  label: "Notifications",
  defaultPressed: true,
} satisfies {
  id: string;
  label: string;
  defaultPressed: boolean;
};
 
export default function ToggleButtonDemo() {
  return (
    <ToggleButton defaultPressed={toggleButtonFixture.defaultPressed}>
      {toggleButtonFixture.label}
    </ToggleButton>
  );
}