Buttons

Expanding disc mute toggle

A round icon toggle where a dark disc grows from the centre to swallow the pastel face, flipping the glyph to light as it passes underneath.

Press the pad to flood it dark and mute the channel, press again to drain.

Using Expanding disc mute toggle

A round icon toggle where a dark disc grows from the centre to swallow the pastel face, flipping the glyph to light as it passes underneath.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: size, accent, restTint, duration, glyph, startOn

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2568Quarter Turn Add ButtonButtonsA circled plus that turns a quarter revolution and floods solid when pointed at, then flips instantly to a light stroke while held.

2115Bookmark save chipButtonsA compact save chip whose bookmark mark snaps from outline to filled and gives one small tug downward the moment an item is saved.

2490Decline call circleButtonsA round icon-only decline button whose handset glyph tilts into a hung-up pose while pressed, with a small refusal shake on hover.

2476Icon reveal chipButtonsA small outlined chip that floods with its accent on hover while the label slides left and a hidden glyph fades in from the right.

2610Icon tile flood buttonButtonsA button with a solid accent icon tile at its left edge; hovering pours that accent across the pale body and flips the label ink to white.

1640Latching icon toggleButtonsA square button that latches on and off: a filled plate fades in, the glyph swaps for its matched counterpart, and a caption beside it spells the state out in words.