Button

Brand #0278ac (bgBrandContrast — the plain accent, #0298d9, is used everywhere else: focus rings, selected states, icons, tints), heights 24/28/40px, radii r8/r8/r10.

Installation

npm install @crisp-ui-kit/crisp

Props

Examples

Intent

All four intents — neutral and ghost measured for toolbar use, primary and danger for primary CTAs.

Size

Three heights: 28px (sm), 32px (md), 40px (lg).

size="field" (carrot-systems/crisp#1158) is Attio's 32px action button: 32px high, 9px corners, 8px start / 10px end padding. It is what a filtered-to-nothing empty state's Clear Filter measures; use it where a button sits beside 32px fields (Input, Select). sm, md and lg are unchanged.

With icons

Pass an <svg> as a leading or trailing child — the button's gap: 6px handles spacing.

Icon-only

shape="icon" produces a square button. Always pass aria-label since there is no visible text.

Loading

loading shows a self-animating spinner, disables the button, and sets aria-busy="true".

Disabled

Native disabled — 50% opacity, pointer disabled.

asChild

Polymorphic rendering — the button's classes and behavior are forwarded onto the child element instead of a <button>. Here it renders an <a>.

Accessibility

Keyboard focus (:focus-visible) draws Attio's own ring, measured on its toolbar buttons: a 1px solid brand outline, offset 1px. When using shape="icon", always provide an accessible name via aria-label or aria-labelledby, since there is no visible text for assistive technology to read. loading sets both disabled and aria-busy="true", so screen readers announce the busy state and duplicate submissions are prevented.