Buttons

Streak border button

A pill button with a soft point of light sliding along its top and bottom edges, the two streaks traveling in opposite directions.

Using Streak border button

A pill button with a soft point of light sliding along its top and bottom edges, the two streaks traveling in opposite directions.

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, speed, thickness

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

2339Download tray pulse buttonButtonsA rounded action pill with a small tray mark on its leading edge, where an arrowhead drops through the tray on a loop while the pointer rests on it.

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

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.

2728Traveling border pillButtonsA small pill button whose hairline border carries one bright accent segment endlessly around the outline while the label text picks up the same travelling sheen.

2668Traveling underglow pillButtonsA capsule whose two tone color band travels sideways on hover while a blurred copy behind it lights the surface underneath.

1662Underglow border buttonButtonsA button whose two pixel border is a tinted band traveling sideways on an endless loop, with a matching blurred glow underneath that moves in step with it.