Components

Toggle

A two-state button that can be on or off.

Stable

Anatomy

import {Toggle} from '@staffbase/spark';

<Toggle />

Inherits props fromBase UI Toggle

Name	Type	Description
`variant`	`outlineghost`	The visual style of the toggle. Default:`outline`

For a single control that turns one formatting option or view setting on or off, such as bold text or a bookmark.
When the change takes effect immediately, without a separate save or confirm step.
When the pressed state is the only feedback the user needs — the result is visible right away.
Inside a toolbar, alongside other toggles in a Toggle Group, when several related options share one row.

Don’t use a Toggle for a labelled setting in a form or settings screen — use a Switch instead.
Don’t use a Toggle to pick one of several mutually exclusive views — use a Segmented Control instead.
Don’t use a Toggle to trigger an action such as saving or deleting — use a Button instead.
Don’t use a Toggle to select rows or items in a list — use a Checkbox instead.
Don’t use a standalone Toggle when several options belong together — group them with Toggle Group.

Use a single icon as the Toggle’s content; keep the control compact and inline.
Let the Toggle manage its own state with defaultPressed, or control it with pressed and onPressedChange.
Apply the change immediately when the Toggle is pressed; don’t require a confirm step.
Place the Toggle close to the content it affects, so the relationship is obvious.

An unpressed and a pressed toggle.

Always set aria-label on an icon-only Toggle — the icon alone gives assistive technology no accessible name.
Name the Toggle after what it does, such as “Bold”, not after its current state.
The Toggle renders as a button with aria-pressed; don’t add your own pressed styling to communicate state.
Never rely on the pressed fill alone — keep the icon legible in every state.
Don’t nest interactive elements inside a Toggle; the whole control is the button.

Announced to screen readers

“Bold, toggle button, not pressed”

With aria-label, the toggle is announced as “Bold, toggle button, not pressed”.

Don't

Announced to screen readers

“toggle button, not pressed” — the control has no name

Without a name, the toggle is announced only as “toggle button, not pressed”.

Keep aria-label to one or two words in Title Case, such as “Bold” or “Bookmark”.
Use the same wording for both states; don’t switch the label between “Bold” and “Unbold”.
Don’t end the label with punctuation and don’t write it as a sentence.