controls

Button

Triggers an action, such as saving a form or opening a dialog.

CSS onlyPlain classes; no JavaScript in any stack.

Usage

A button needs the component class, one variant and one size.

<button class="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>

Examples

Variants

Use one primary button per view for the main action; secondary, outline and ghost rank below it.

<div class="flex flex-wrap items-center gap-3">
  <button class="ca-button ca-button--primary ca-button--md" type="button">Publish post</button>
  <button class="ca-button ca-button--secondary ca-button--md" type="button">Invite member</button>
  <button class="ca-button ca-button--outline ca-button--md" type="button">Export list</button>
  <button class="ca-button ca-button--ghost ca-button--md" type="button">Cancel</button>
</div>

Sizes

Pick the size that matches the surrounding controls. On touch screens every size keeps a 44 by 44 pixel target.

<div class="flex flex-wrap items-center gap-3">
  <button class="ca-button ca-button--primary ca-button--sm" type="button">Add item</button>
  <button class="ca-button ca-button--primary ca-button--md" type="button">Add item</button>
  <button class="ca-button ca-button--primary ca-button--lg" type="button">Add item</button>
</div>

Disabled

Use disabled when the action can never apply. Use aria-disabled="true" with an explanation when people should still find the button and learn why it is unavailable.

Select at least one row to export.

<div class="flex flex-wrap items-center gap-3">
  <button class="ca-button ca-button--primary ca-button--md" type="button" disabled>Save draft</button>
  <button class="ca-button ca-button--outline ca-button--md" type="button" aria-disabled="true" aria-describedby="export-reason">Export list</button>
  <p id="export-reason" class="text-sm text-(--ca-text-secondary)">Select at least one row to export.</p>
</div>

As a link

Use an <a> with button classes when the action navigates to another page.

Read the guide

<a class="ca-button ca-button--outline ca-button--md" href="#usage">Read the guide</a>

Guidance and accessibility

When to use

Use a button for actions: saving, sending, opening and closing.
Use a link for navigation. If it looks like a button but goes somewhere, render an <a> with button classes.
Start the label with a verb and name the object, such as “Save draft” or “Delete project”. A bare “OK” or “Submit” does not say what happens.

Accessibility

Use a real <button> with type="button", or type="submit" inside a form. Do not put button classes on a <div>.
The core keeps a visible 2 pixel focus ring that skins cannot remove, and a touch target of at least 44 by 44 pixels on coarse pointers.
A button with only an icon needs an aria-label that names the action.
Prefer aria-disabled="true" over disabled when people need to discover the button and read why it is unavailable; point aria-describedby at the explanation. Calaca styles both the same way.

Classes

Generated from the component contract. Parts use __, modifiers use --.

Classes of the button component
Class	Kind	Use it for
`ca-button`	Component	Layout, focus ring, disabled behavior and touch target.
`ca-button--primary`	Variant	The main action of a view.
`ca-button--secondary`	Variant	A strong action that is not the main one.
`ca-button--outline`	Variant	A lower-emphasis action with a visible boundary.
`ca-button--ghost`	Variant	The lowest emphasis, for actions such as Cancel.
`ca-button--sm`	Size	Compact size for dense toolbars and tables.
`ca-button--md`	Size	Default size.
`ca-button--lg`	Size	Prominent size for marketing pages and empty states.

Skins

The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.

Base skin

Neutral grayscale starting point; product skins extend it and change what differs.

Calaca skin

The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.

Proof skin

Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.

Crossview skin

The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.

Framework notes

Link the prebuilt stylesheet of your skin next to your brand theme. No build step.

<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />

In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.

@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";

Same stylesheet as above; write the classes in className.

<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>

Search

Documentation