Buttons

12 pieces in four styles. Preview each one live, then copy the prompt that puts it in your project.

12 components
4 styles, light and dark

Neo-Brutal

A printed poster that behaves like software: warm paper, ink outlines and hard shadows that press.

Neo-Brutal Button

Keys in seven variants and three sizes, each with an ink outline and a solid ink offset that presses: hover lifts 2 px onto 2 px more shadow, a click sinks it into the shadow. primary is the volt key, secondary the card-white key, outline the clear key that takes the fill it sits on (use it on volt, lilac and cobalt), accent the cobalt key (it turns volt with ink text on the cobalt band), destructive the tomato key, ghost no outline and no shadow, link ink text with a 2 px underline.

Neo-Brutal Icon Button

Square, icon-only key. label is the accessible name and the native tooltip.

Neo-Brutal Button Group

Related buttons in a row or column (role="group"). attached joins them into one strip of keys on a 2 px shadow, with the borders merged and only the outer corners rounded.

Noir Aurora

A night canvas lit by one northern-lights curtain, with hairline cards and moonlight headlines.

Everything in Noir Aurora

Noir Aurora Button

Buttons in seven variants and three sizes. primary is the main action, one per block: silver on Night, ink on Day, with an aurora underglow on hover. secondary is a lit control that sits beside it, outline a quiet bordered control, ghost text only (navbar, toolbars), accent aurora green (rare: an action inside product UI), destructive for deleting, link text underlined in aurora.

Noir Aurora Icon Button

Square, icon-only button. label is the accessible name and the native tooltip.

Noir Aurora Button Group

Related buttons in a row or column (role="group"). attached joins them: shared hairlines, outer corners rounded only.

Soft Bento

Moulded objects on a warm oat canvas: soft tiles, rounded keys and a calm bento rhythm.

Everything in Soft Bento

Soft Bento Button

Pill buttons in seven variants and three sizes; every one squishes when pressed and rises 1 px on hover. primary is the blue clay pill (one per block; on the blue block it turns into the white clay button with blue text), secondary white clay, accent the soft brand pill, outline a ring for busy surfaces, ghost text only, destructive the red clay pill, link underlined text.

Soft Bento Icon Button

Round, icon-only clay button that squishes like Button. label is the accessible name and the native tooltip.

Soft Bento Button Group

Related buttons in a row or column (role="group"). attached joins them into one pill with hairline dividers.

Swiss Tech Mono

A page that prints its own measured grid: paper, white tiles, ink and one signal red.

Everything in Swiss Tech Mono

Swiss Tech Mono Button

Buttons in seven variants and three sizes (32 / 40 / 48 px). primary is ink with a lime wipe on hover (the main action, one per block), secondary white with a grey border (beside a primary), outline transparent with a border, ghost text only (navbar, toolbars), accent the lime button (only for the selected choice, such as the featured plan), destructive for deleting, link underlined text. iconEnd arrows nudge on hover.

Swiss Tech Mono Icon Button

Square, icon-only button. label is the accessible name and the native tooltip.

Swiss Tech Mono Button Group

Related buttons in a row or column (role="group"). attached joins them: shared borders, outer corners rounded only.

Preview everything. Take three a day, free.

A free account takes 3 new pieces a day: the code, the styles and the install prompt. Pro and Team remove the limit.

Create a free account See the plans