Button

A clear hierarchy of primary, secondary, quiet and danger actions, with a minimum 44px target.

Show the markup

<div class="cc-actions">
  <button class="cc-button" type="button">Submit application</button>
  <button class="cc-button cc-button--secondary" type="button">Save draft</button>
  <button class="cc-button cc-button--quiet" type="button">Cancel</button>
</div>

Show the markup

<button class="cc-button" type="button">
  <svg class="cc-icon" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#download"/></svg>
  Download application
</button>

Show the markup

<div class="cc-actions">
  <button class="cc-button cc-button--danger" type="button">Delete draft</button>
  <button class="cc-button" type="button" aria-disabled="true">Submit (needs a signature)</button>
</div>

Show the markup

<button class="cc-button cc-button--sm" type="button">Filter</button>

Show the markup

<div style="background: var(--cc-brand-deep); padding: var(--cc-space-4); border-radius: var(--cc-radius-md);">
  <button class="cc-button cc-button--on-deep" type="button">Sign out</button>
</div>

Choosing an emphasis

Use one primary action per group. Secondary buttons support it; quiet buttons provide a lower-emphasis alternative such as canceling. Use cc-actions to keep spacing consistent and let long labels wrap on small screens.

Accessibility

Minimum 44×44px target (2.5.5), regardless of variant.
White-on-brand and brand-on-white pairings both exceed 7:1.
Buttons do things; links go places. Use <a class="cc-button"> only for a link that must look like a button — never the reverse.
Disabled buttons stay in the accessibility tree via aria-disabled when the reason should be discoverable; curbcut.js cancels their activation, so the exposed state and the behaviour agree.