Button

Use Button to highlight or guide a shopper’s actions. It renders a styled <button> by default, or an <a> styled as a button when you set href.

Import

import { Button } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
variant	'primary' | 'secondary' | 'tertiary'	No	Change the button style. Defaults to primary.
size	'medium' | 'large'	No	Change the button size. Defaults to medium.
children	ComponentChildren	No	Add text or content to the button.
icon	VNode	No	Add an Icon component to the button.
disabled	boolean	No	Disable the button. Defaults to false.
active	boolean	No	Render the active state. Defaults to false.
activeChildren	ComponentChildren	No	Replace the value of children when the button is active.
activeIcon	VNode	No	Replace the value of icon when the button is active.
href	string	No	Render the component as a link to this URL.
type	'button' | 'submit' | 'reset'	No	Native button type. If you don’t set it, the browser treats the button as submit, which submits an enclosing form.

Button also accepts standard button and anchor HTML attributes (for example, onClick, className, and aria-*), except size and icon.

Example

Render a button with a label, an icon, and a click handler. Pass the icon prop an Icon VNode created with h, and keep the returned instance so you can update it later with setProps.

import { Button, Icon, provider } from '/@dropins/tools/components.js';
import { h } from '/@dropins/tools/preact.js';

const addToCart = await provider.render(Button, {
  variant: 'primary',
  size: 'medium',
  children: 'Add to Cart',
  icon: h(Icon, { source: 'Cart' }),
  onClick: () => yourAddToCart(),
})(document.querySelector('.add-to-cart'));

// Update the button later — for example, confirm the item was added
addToCart.setProps((prev) => ({
  ...prev,
  children: 'Added',
  icon: h(Icon, { source: 'Check' }),
}));

Set href to render the button as an anchor:

await provider.render(Button, {
  variant: 'secondary',
  href: '/cart',
  children: 'View Cart',
})(document.querySelector('.view-cart'));

Related

• Icon — pass an Icon as the icon prop.
• Design tokens — the colors, spacing, and typography the button uses.