Toggle — React

---
import Toggle from '../components/astro/Toggle.astro';
---

<Toggle aria-label="Toggle" pressed={false} client:load>Bold</Toggle>

<!-- Rizzo CSS. Toggle state via JS (aria-pressed, class toggle--pressed). -->
<button type="button" class="toggle" aria-pressed="false">Toggle</button>

<script>
  import { Toggle } from '$lib/rizzo';
  let pressed = $state(false);
</script>

<Toggle bind:pressed aria-label="Toggle">Bold</Toggle>

<script setup>
import { ref } from 'vue';
import Toggle from '@/components/rizzo/Toggle.vue';
</script>

<template>
  <Toggle v-model:pressed="pressed" aria-label="Toggle">
    Bold
  </Toggle>
</template>

import { useState } from 'react';
import { Toggle } from './components/react';

const [pressed, setPressed] = useState(false);
<Toggle pressed={pressed} onPressedChange={setPressed} aria-label="Toggle">
  Bold
</Toggle>