Docs / Components / Buttons

Buttons

Copy-paste CSS buttons with primary, secondary and danger styles, five colours, any brand colour via one variable, four sizes, icon buttons and a loading state. Dark mode built in, no JavaScript.

Buttons

Every button needs ace-btn plus one variant. Use it on <button>, or on <a> / router links for navigation.

Link as button

<button class="ace-btn ace-btn--primary">Save changes</button>
<button class="ace-btn ace-btn--secondary">Cancel</button>
<button class="ace-btn ace-btn--secondary ace-btn--destructive">Delete</button>
<button class="ace-btn ace-btn--danger">Yes, delete</button>
<button class="ace-btn ace-btn--primary ace-btn--attention">Only with pending</button>
<a href="/cars" class="ace-btn ace-btn--secondary">Link as button</a>

Colours

Named colours are filled buttons with the same construction as primary, in a fixed palette. Each shade keeps the white label readable (at least 4.5:1). For any other colour, set --ace-tone on a primary button, either on one button or on a whole section.

<button class="ace-btn ace-btn--blue">Blue</button>      <!-- --green  --purple  --pink  --black -->

<!-- Any colour: --ace-tone on a primary button -->
<button class="ace-btn ace-btn--primary" style="--ace-tone:#0e7490">Book now</button>

<!-- …or on a section: every primary button inside takes it -->
<section style="--ace-tone:#0e7490"> … </section>

<!-- Light colour? Give it dark text -->
<button class="ace-btn ace-btn--primary" style="--ace-tone:#fde047; --ace-tone-fg:#111">Sale</button>

<!-- Tailwind: an arbitrary property works as a class -->
<button class="ace-btn ace-btn--primary [--ace-tone:#0e7490]">Book now</button>

States

<!-- Icon + label: any inline <svg> is sized to 16px automatically -->
<button class="ace-btn ace-btn--primary"><svg …/> New booking</button>

<!-- Loading: hides the label and shows a spinner -->
<button class="ace-btn ace-btn--primary" aria-busy="true">Saving…</button>

<!-- Disabled (on links, use aria-disabled="true") -->
<button class="ace-btn ace-btn--primary" disabled>Disabled</button>

Use one primary button per view or dialog. It's the action that commits (Save, Create, Book, Sign in).
Make every other action --secondary: Cancel, Edit, Filter, Export.
For page or row-level Delete buttons, use --secondary --destructive.
Put the primary button on the right in dialog footers: Cancel · Save.

Don't

Use filled --danger anywhere except the confirm button of a destructive dialog.
Put two primary buttons side by side.
Use --attention as a general amber button. It only marks a toggle that flags pending items.
Write vague labels like "OK" or "Submit". Name the action instead: "Save car", "Send invoice".

Button sizes

The default height is 40px. In a toolbar or filter bar, give every control --toolbar (36px tall, 12px text) so they all line up with the 36px inputs and selects.

ace-btn--sm        36px
(default)          40px
ace-btn--lg        44px  — hero / checkout CTAs
ace-btn--toolbar   36px, 12px text — filter bars
ace-btn--icon      square; combine with --sm / --lg / --toolbar
ace-btn--block     full width

<!-- Icon-only buttons MUST have an aria-label -->
<button class="ace-btn ace-btn--secondary ace-btn--icon" aria-label="Settings"><svg …/></button>

Use it

One stylesheet from the CDN, pinned to v1.3.0:

<link rel="stylesheet" href="https://acecss.dev/v1.3.0/ace.min.css"
      integrity="sha384-zHAwOqjifsc0D+iUvzD1a4W0R2g0BOK9AqQJZGakUEp/Tm5IUcP07R9xkY0q/stj" crossorigin="anonymous">

Or from npm:

npm i @acecss/core

import '@acecss/core'

Bundlers, Tailwind, every script in one file and self-hosting: Install.

More components

Hero buttonA sparkle call-to-action button for landing pages: a dark pill that turns brand-coloured on hover, with twinkling stars, a spark line round the edge and particles. No GSAP, respects reduced motion.

NavbarA sticky floating glass navbar: blurred, tinted pill with a sliding hover highlight, a raised shadow on scroll and a mobile menu that unfolds inside the pill. Framework-free, dark mode included.

Liquid navbarA liquid-glass navbar that refracts the real page behind it: a WebGL lens magnifies, bends content in at the rim with a colour fringe, frosts and lights the glass. Drop-in HTML, no framework.

Segmented controlA segmented control for switching views or options: a row of AceCSS buttons with aria-pressed, in three sizes and a full-width variant. Accessible, dark-mode ready, no JavaScript needed for the styles.

InputsAccessible CSS text inputs with labels, hints, required markers and error states, plus inputs with icons, prefixes and suffixes. Works with plain HTML forms and any framework.

Select & dropdownStyle native selects and textareas, or turn any <select> into a searchable dropdown with sub-labels and option groups. About 3 KB of JavaScript, keyboard accessible, no dependencies.

Date pickerA dependency-free date picker and pick-up → return date range picker with times, min and max dates, locales and a change event. Dates can be typed or picked. About 5 KB of JavaScript, dark mode ready.

Checkbox, radio & switchStyled native checkboxes, radio buttons and toggle switches in pure CSS: accessible labels, focus rings and dark mode, with no JavaScript.

BadgesStatus badges in pure CSS: neutral, primary, success, warning, danger and info, in two sizes, with contrast checked for white text.

Choice cardsSelectable cards for plans, extras or options: built on AceCSS buttons, selected with a class, aria-pressed or a checked radio inside. Pure CSS, accessible, dark mode ready.