Fieldbook
Sign in

Buttons

Orbiting rim light button

A dark pill whose one pixel rim is lit from behind by a slowly turning cone of colour, spinning faster while the button is held.

Using Orbiting rim light button

A dark pill whose one pixel rim is lit from behind by a slowly turning cone of colour, spinning faster while the button is 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: label, accent, spinSeconds, rimBlur, haloSize

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

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.
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.
Overhead light pill
2650Overhead light pillButtonsA dark pill button lit by a soft pool of overhead light, dimming as a whole on hover and brightening its thick outer ring on focus.
Rim ramp button
2691Rim ramp buttonButtonsA thick coloured rim surrounds a dark inner face; on hover the face clears and the rim's colour ramp floods the whole button.
Rotating beam rim button
2547Rotating beam rim buttonButtonsA leaf shaped button with a bright two tone beam spinning around its rim, visible only in the gap around the face plate.
Streak border button
1752Streak border buttonButtonsA pill button with a soft point of light sliding along its top and bottom edges, the two streaks traveling in opposite directions.