Toggle
Button with aria-pressed. Use pressed prop for controlled state.
Add this component
The command below includes <strong>Toggle</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
pnpm dlx rizzo-css add Toggle
bunx rizzo-css add Toggle
Live Example
Click to toggle pressed state.
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Toggle from '../components/astro/Toggle.astro';
---
<Toggle ariaLabel="Toggle bold">Bold</Toggle>
<Toggle pressed ariaLabel="On">On</Toggle>
<!-- Rizzo CSS. Toggle state via JS (aria-pressed, class toggle--pressed). -->
<button type="button" class="toggle" aria-pressed="false" aria-label="Toggle bold">Bold</button>
<button type="button" class="toggle toggle--pressed" aria-pressed="true" aria-label="On">On</button>
<script>
import { Toggle } from '$lib/rizzo';
</script>
<Toggle ariaLabel="Toggle bold">Bold</Toggle>
<Toggle pressed ariaLabel="On">On</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>
Other frameworks: Vanilla · Svelte · Vue · React
npm 
pnpm 
yarn 
bun