button() builds a button: variant switches between Solid / Subtle / Surface / Outline / Ghost / Plain, size between sm / md / lg. Pass href to render an <a>, otherwise a native <button type="button">.

Variants

All variants

Solid Subtle Surface Outline Ghost Plain

button({ label: 'Solid', variant: 'solid' });
button({ label: 'Subtle', variant: 'subtle' });
button({ label: 'Surface', variant: 'surface' });
button({ label: 'Outline', variant: 'outline' });
button({ label: 'Ghost', variant: 'ghost' });
button({ label: 'Plain', variant: 'plain' });

Sizes

sm / md / lg

Small Medium Large

button({ label: 'Small', size: 'sm', variant: 'outline' });
button({ label: 'Medium', size: 'md', variant: 'outline' });
button({ label: 'Large', size: 'lg', variant: 'outline' });

Icon

Icons render before the label; any inline SVG string works.

Icon + solid

Call us

button({
  label: 'Call us',
  variant: 'solid',
  icon: '<svg …>…</svg>', // any inline SVG string
});

As a link

With href the button renders as an <a>; external opens a new tab.

As link

Get started

button({ label: 'Get started', href: '/guides/example/', variant: 'solid' });

Colors

color picks from the kit’s semantic tokens (primary / info / success / warning / error / idea). Solid renders the color with white contrast text.

Solid colorPalette

Info Success Warning Error Idea

button({ label: 'Info', variant: 'solid', color: 'info' });
button({ label: 'Success', variant: 'solid', color: 'success' });
button({ label: 'Warning', variant: 'solid', color: 'warning' });
button({ label: 'Error', variant: 'solid', color: 'error' });
button({ label: 'Idea', variant: 'solid', color: 'idea' });

Outline keeps the same palette:

Outline colorPalette

Info Success Warning Error Idea

button({ label: 'Info', variant: 'outline', color: 'info' });

Props

Option	Type	Default	Description
label	string	—	Button text (required).
href	string	—	Target URL — renders an <a> instead of <button>.
variant	'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain'	'solid'	Visual style.
size	'sm' | 'md' | 'lg'	'md'	Height and padding (2rem / 2.5rem / 3rem).
color	'primary' | 'info' | 'success' | 'warning' | 'error' | 'idea'	'primary'	Color palette from the kit’s semantic tokens.
icon	string	''	Raw SVG string before the label.
external	boolean	false	With href: opens the link in a new tab.
attrs	Record<string, string>	—	Extra HTML attributes (e.g. data-cpd-drawer-trigger).

Notes

• Hover darkens in light mode and lightens in dark mode (color-mix); focus shows a 2px ring (--cpd-ring); disabled renders at 50% opacity.
• Radius 0.375rem; weight 600; line-height: 1.