Actions

Button

Spectrum's pill button, with its label in Figtree.

Preview

Props

Also takes the props of React.ButtonHTMLAttributes<HTMLButtonElement>.

Guidelines

Spectrum's pill button, with its label in Figtree. Primary (neutral dark) is the default; accent (the logo's blue) is the one action a screen is built around; secondary is gray.

Provide: a short verb-first label as children, optional icon and iconRight, variant (accent, primary, secondary, negative), fillStyle (fill or outline, outline for primary and secondary only), size (S 24, M 32, L 40, XL 48), and href to render a link.

• At most one accent button per view (Spectrum allows up to three; Makado keeps one so the focal point stays obvious). Primary for strong actions, secondary for everything else, and never a secondary button alone in a group.
• Negative only for actions that destroy or cancel something, and pair it with a confirmation.
• Labels are sentence case verbs: "Send invoice", "View contract". No trailing punctuation.
• On phones use L (Spectrum's mobile scale).

• The main action is black. Calls to action (New project, Create, Save, Mark paid) use primary: black in light, white in dark. accent (blue) is no longer used for buttons.
• Delete is red. A delete button is negative with fillStyle: outline (red text and edge); the confirming Delete is solid negative.

Hover and press

• Primary belongs to the glass. A primary button carries a soft inner rim (cta-rim) and a quiet shadow (cta-shadow). On hover it lifts 1px with a slightly lighter fill (cta-shadow-hover), never a flat color swap; pressed, it settles (cta-shadow-pressed). Text holds 4.5:1 in every state, light and dark.
• Every button presses in a little (motion-press-scale, motion-duration-100). Reduced motion turns off the lift and the press.
• premium marks a Makado Premium feature: the crown after the label, read as "Premium" by screen readers. Use it on the button that starts the feature (Autofill), not on every button inside it.