Toggle Btn

A two-state button that toggles between pressed (on) and unpressed (off), using aria-pressed for accessibility.

Basic Usage

import { useState } from "react"
import { ToggleBtn } from "@paramanu/buttons-react"

export default function App() {
const [bold, setBold] = useState(false)
return <ToggleBtn pressed={bold} onChange={setBold}>Bold</ToggleBtn>
}

<button class="pm-toggle-btn pm-toggle-btn--default pm-toggle-btn--md" aria-pressed="false">Bold</button>

Variants

import { ToggleBtn } from "@paramanu/buttons-react"

export default function App() {
return (
  <div style={{ display: "flex", gap: "8px" }}>
    <ToggleBtn variant="default" pressed>Default</ToggleBtn>
    <ToggleBtn variant="outline" pressed>Outline</ToggleBtn>
  </div>
)
}

<div style="display: flex; gap: 8px;">
<button class="pm-toggle-btn pm-toggle-btn--default pm-toggle-btn--md pm-toggle-btn--pressed" aria-pressed="true">Default</button>
<button class="pm-toggle-btn pm-toggle-btn--outline pm-toggle-btn--md pm-toggle-btn--pressed" aria-pressed="true">Outline</button>
</div>

Accessibility

Uses aria-pressed to communicate toggle state to assistive technology
Label must remain the same regardless of pressed state (WAI-ARIA best practice)
Keyboard accessible with Enter and Space

Best Practices

Use for binary on/off actions (e.g., Bold, Italic, Mute)
Keep labels unchanged between states; the state is communicated via aria-pressed
Use ToggleGrp for mutually exclusive or multi-select groups

React Props

Extends all native <button> HTML attributes.

Prop	Type	Default	Description
`variant`	`"default" \| "outline"`	`"default"`	Visual style
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Size preset
`pressed`	`boolean`	`false`	Whether the button is in the on state
`disabled`	`boolean`	`false`	Disabled state
`fullWidth`	`boolean`	`false`	Stretch to container width
`value`	`string`	—	Value for use with ToggleGrp
`onChange`	`(pressed: boolean) => void`	—	Callback when toggle state changes
`children`	`ReactNode`	—	Btn content

CSS Classes

Class	Purpose
`pm-toggle-btn`	Base styles
`pm-toggle-btn--default`	Default variant
`pm-toggle-btn--outline`	Outline variant
`pm-toggle-btn--pressed`	Pressed/on state
`pm-toggle-btn--disabled`	Disabled state
`pm-toggle-btn--full-width`	Full width
`pm-toggle-btn--xs` to `--xl`	Size modifiers