Buttons

Quarter Turn Add Button

A circled plus that turns a quarter revolution and floods solid when pointed at, then flips instantly to a light stroke while held.

Point to turn and flood, hold for the hard switch.

Using Quarter Turn Add Button

A circled plus that turns a quarter revolution and floods solid when pointed at, then flips instantly to a light stroke while held.

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: accent, size, turn, strokeWidth, fillOnHover

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

2695Circle plus add buttonButtonsA wordless add button whose plus sign draws its two strokes outward from the centre on hover while the fill deepens.

2536Dashed outline tooltip buttonButtonsA dashed ghost button that floods with its accent on hover or focus while a pointed tooltip unrolls out of the edge nearest the button.

2538Diagonal blob flood buttonButtonsAn outlined button flooded by a large rounded blob that slides in diagonally from off its top corner and darkens while held.

2520Expanding disc mute toggleButtonsA 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.

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.

2398Panel swallow buttonButtonsA button with a darker icon panel docked at one edge; on hover or keyboard focus the panel grows across the whole width and the label fades beneath it.