Outline Toggle for React

Both are transparent while unpressed and fill with the muted background when pressed. The default variant has no border; the outline variant adds a border in the input border color, so the button is visible even before it's hovered or pressed. The difference is mostly in the unpressed state.

Yes. Add a border class on the Toggle, such as border-primary, and use the aria-pressed: variant for the pressed state, such as aria-pressed:border-primary. Use theme tokens rather than fixed palette colors so the border follows light and dark mode, and keep at least 3:1 contrast against the background.

Yes. The variant only changes the styles; the button, its aria-label and its pressed state are announced the same way. The border actually helps people find the control, as long as it has enough contrast with the surface behind it.

A change of border alone is easy to miss. Filling the background makes pressed and unpressed clearly different at a glance, and it matches the default variant, so both look the same once they're on. To change it, style the aria-pressed attribute on the Toggle.

Use the outline variant when the toggles sit on a busy or similarly colored surface, when they need to look like buttons before they're pressed, or when the toolbar mixes them with outline buttons. Use the default variant in a toolbar that already has its own frame, where borders on every button would add noise.

No: the variant is set on the ToggleGroup, and every ToggleGroupItem takes it from the group, which keeps a group consistent. If two sets of options need different weights, use two groups, one with variant="outline" and one without, as the Outline Toggle Group and Default Toggle Group examples show.