Buttons

Rising disc icon row

A row of ringed icon buttons where hovering lifts a filled disc up out from behind its ring, leaving the glyph darkened inside the empty outline.

Using Rising disc icon row

A row of ringed icon buttons where hovering lifts a filled disc up out from behind its ring, leaving the glyph darkened inside the empty outline.

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, count, hueSpread, size, lift

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

2611Lifting glyph rowButtonsA short row of icon-only buttons where the hovered glyph lifts off the baseline while a soft circular tint fades in behind it, each item tinted in its own hue.

2521Ring halo pill buttonButtonsA pill button that keeps a clear gap around its colored core, fills that gap with a lightened accent ring on hover or keyboard focus, and squeezes inward while pressed.

2559Share row liftButtonsA share pill that lifts a matching pill of destination icons up out of itself on hover and drops it back the moment attention leaves.

2037Shrinking cap icon rowButtonsA row of round icon buttons whose fill hides behind a dark cap that collapses away on hover, uncovering the colour from the rim inward.

2657Tooltip tint icon rowButtonsA row of circular icon buttons where hovering one lifts a labelled bubble above it and floods both in that item's own tint.

2579Breathing Inset ButtonButtonsA pale moulded button whose inner panel pulls away from the rim on hover while the send glyph slides a short distance toward the label.