Toggle

A single stateful button that switches between pressed and unpressed states — for standalone options like "show password" or a bold/italic formatting toggle, as opposed to a mutually-exclusive group.

M3 Spec

open_in_new

Overview

Material 3 doesn't define a standalone "toggle button" component page — the selected/ pressed button state it covers is described as part of the Buttons spec. Accordingly, Toggle reuses Button's own theme under usage: 'selection', giving it the same sizing and shape scale as Button, but with a binary pressed/unpressed visual state instead of variant/color styling.

It's not restricted to icon-only content like an icon toggle button, and it doesn't coordinate selection across a group like ButtonGroup or a segmented-button row — it's a single independent on/off control. Under the hood it renders Bits UI's Toggle.Root.

Import

import { Toggle } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Size, shape, pressed, disabled, and loading Controls.

widgets

With Icon

Toggles combining an icon and a label.

Basic Usage

pressed is bindable:

<script lang="ts">
  import { Toggle } from '@noxlovette/material';

  let bold = $state(false);
</script>

<Toggle bind:pressed={bold} iconProps={{ name: 'format_bold' }}>
  Bold
</Toggle>

Toggle Props

Prop	Type	Default	Description
`pressed`	`boolean`	`false`	Whether the toggle is currently pressed/selected. Bindable.
`onPressedChange`	`(pressed: boolean) => void`	`—`	Callback fired when the pressed state changes.
`children`	`Snippet`	`—`	Label content inside the toggle.
`iconProps`	`IconProps`	`—`	Optional leading icon.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Controls height, padding, and typescale (shared with Button).
`shape`	`"round" \| "square"`	`"round"`	Fully rounded or slightly rounded corners.
`disabled`	`boolean`	`false`	Disables the toggle.
`loading`	`boolean`	`false`	Shows a LoadingIndicator in place of the icon/label.

Accessibility

toggle_on

Pressed state

Bits UI's Toggle.Root exposes aria-pressed, so assistive tech announces the on/off state directly.

label

Icon-only toggles

If used with iconProps and no children, give the icon an unambiguous meaning or add a visually-hidden label — there is no built-in tooltip like ButtonIcon.

block

Disabled state

disabled removes the toggle from the tab order and exposes the disabled attribute to assistive tech.