Buttons

Dimensions

Heights, paddings, and gap values for every size.

Typography

SF Pro Display Semibold across all sizes. Tracking tightens as size grows.

Color styles

Token-level color mapping for each type × state combination.

Spacing

Minimum breathing room around buttons — respect these to avoid accidental adjacency.

Motion

All state transitions use the same ease and duration for consistency.

Visual hierarchy

One primary per screen. When you feel tempted to add a second, you need to rethink the screen — not the button.

Icons should communicate clearly

A single recognizable glyph per button sharpens intent — a sparkle for generation, pause for protection, copy for identity values. Never stack an icon over a label and never ship two icons in one button.

Keep the icon and label grouped

As a Cloaked button grows or shrinks between contexts — a form sheet, a list row, a sidebar — the icon and label stay together, centered as a single unit.

Icon placement

The icon sits on the leading side of the label — where the eye enters the button. In left-to-right surfaces that's the left; in right-to-left surfaces it flips to the right so the reading order is preserved.

Constrain button width

Buttons can change size and scaling behavior across different window sizes. On wide marketing surfaces, the primary CTA can stretch so wide it stops reading as a button — it looks like an empty banner. Constrain the width or pair it with other elements so the Cloaked pill shape stays visible.

Container width should fit the label

The button sizes itself to the label it carries. On an identity card, "Copy email" should hug its text; it can stretch to match a layout; but it must never be narrower than the word it holds.

Keep toggled label lengths consistent

Call Guard's Pause / Resume control toggles between two states. Keep the labels within a few characters of each other so the layout doesn't jump and the user's eye stays on the action.

Use buttons sparingly

On Cloaked surfaces a button carries weight — it commits the user to generating an identity, confirming an upgrade, or pausing protection. Reserve buttons for those moments. Secondary actions can live as text links, chips, or icon buttons so the primary action stays unmistakable.

Never wrap label text

Label text should always be fully visible on a single line. If the label feels long for the container, shorten the label — don't wrap it.

Layout & alignment

Primary goes on the right in western reading contexts. Stacking is acceptable on narrow screens; keep the primary on top.

Accessibility

Buttons must be operable by keyboard and understandable to assistive tech. These aren't optional.

HTML

Every Cloaked button is a <button> element with a type class. No wrappers, no divs.

<button class="btn btn-primary">
  Continue
</button>

<!-- Medium, secondary -->
<button class="btn btn-secondary md">
  Confirm
</button>

<!-- Outlined tertiary, small -->
<button class="btn btn-tertiary outlined sm">
  Learn more
</button>

<!-- Destructive primary -->
<button class="btn btn-primary destructive">
  Delete identity
</button>

Modifiers

Stack these classes on top of the base type.

React

The <Button> component wraps the CSS classes and accepts type, size, and icon props.

import { Button } from '@cloaked/ui';

<Button type="primary" onClick={handleStart}>
  Start protection
</Button>

<Button
  type="secondary"
  size="md"
  leadingIcon={<PlusIcon />}
>
  Add identity
</Button>

<Button type="primary" destructive>
  Delete identity
</Button>

Props