ActionButton

Use ActionButton to let a shopper complete an action or select an item in a workflow. It renders a styled <button> that can show a label, an icon, or both.

Import

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

Props

Prop	Type	Req?	Description
children	ComponentChildren	No	Add text or content to the button.
icon	VNode<HTMLAttributes<SVGSVGElement>>	No	Add an Icon component to the button.
active	boolean	No	Render the active state. Defaults to false.
disabled	boolean	No	Disable the button. Defaults to false.

ActionButton also accepts standard button HTML attributes (for example, onClick, className, and aria-label), except icon.

Example

Render an action button for a row in a list, with a click handler and an aria-label that names the specific row.

import { ActionButton, provider } from '/@dropins/tools/components.js';

await provider.render(ActionButton, {
  children: 'Edit',
  // Repeating "Edit" for every row is ambiguous to screen reader users, so
  // aria-label names which item this button acts on.
  'aria-label': `Edit ${yourItemName}`,
  onClick: () => yourEditItem(),
})(document.querySelector('.action-button'));

Related

• ActionButtonGroup — group related action buttons into a single selectable control.
• Icon — pass an Icon as the icon prop.