Buttons

Button set

A full button family covering six intents, six sizes, icon-only shapes and a loading state that swaps in a spinner without the button changing width.

Using Button set

A full button family covering six intents, six sizes, icon-only shapes and a loading state that swaps in a spinner without the button changing width.

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: variant, size, accent, loading, disabled, label

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

1638Intent button setButtonsA complete button family in one file: solid, soft, outline, ghost, link and danger weights across four sizes, with icon slots, a busy state and a real focus ring.

1646Press spring buttonButtonsA base button family in six skins and four sizes whose press compresses on a spring and overshoots back, identically for pointer and keyboard.

2509Dialog bevel buttonButtonsA small grey system button built from two nested hard bevels and a dotted inner focus mark, whose bevel lines swap on press so it reads as pushed in.

2697Download tooltip buttonButtonsA square icon button whose download arrow nudges downward and takes the accent color while a file-size caption unfolds beneath it.

1827Expanding icon pillButtonsA round icon button that grows into a labelled pill on hover or focus, turning its glyph a full revolution as the label slides in.

2524Flight path confirm buttonButtonsA booking button that flies a small plane in a lap around its face while three dots pulse, then turns green and reports the booking confirmed.