Button

Live, interactive React component · dark themeResponsive

About the 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. An iconEnd arrow nudges on hover; presses dip by a pixel. Loading shows a spinner, keeps the width, sets aria-busy, disables the button and announces loadingLabel. ButtonLink is an <a> with the same look (never disabled). buttonClass(look, className) gives the classes for a router link.

It is part of Noir Aurora. The style’s 91 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.

See it on a full page

The same piece, drawn for a different look. Open one to compare it live.

All 12 in Buttons

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.

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.

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.