Fieldbook
Sign in

Buttons

Drifting aura button

A softly embossed slanted pad that wakes a blurred band of color behind its edges and lets the brightest part drift around the outline.

Using Drifting aura button

A softly embossed slanted pad that wakes a blurred band of color behind its edges and lets the brightest part drift around the 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, auraTint, label, blur, driftSeconds, skew

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

Halo glow button
2475Halo glow buttonButtonsA dark pill whose blurred accent halo fades in on hover and travels around the edge while a thin inner ring brightens.
Drifting halo button
2764Drifting halo buttonButtonsA dark button ringed by a slightly larger halo frame in which one bright band of the accent drifts endlessly around the perimeter, brightening and lifting the plate on hover.
Echo halo hover button
2522Echo halo hover buttonButtonsA dark pill that on hover or keyboard focus throws stepped, fading copies of itself along the four diagonals while the pill itself grows.
Emboss swap button
1955Emboss swap buttonButtonsA small saturated chip that trades its flat cast shadow for a four way moulded relief on hover, so the surface appears to be pressed out of the page.
Ghost echo lift button
2606Ghost echo lift buttonButtonsA pill that lifts on hover while a ghost copy of itself swells outward behind it and dissolves.
Glow halo button
1828Glow halo buttonButtonsA pill button with a duplicate of itself blurred behind it, so hovering blooms a soft colored halo while the fill slowly drifts.