Multi-action button

A button is a combination of a dropdown and button. It lets users choose from multiple parallel actions to reduce visual complexity.

Overview

Resources

Install

yarn add @activecampaign/camp-components-multi-action-button

Variations

Multi-action buttons provide a primary action and a menu of related actions. They are commonly used in tables. Multi-action buttons largely follow the styling of the Camp button component, and have both primary and secondary appearances.

Primary button

The primary appearance of the multi-action button is used sparingly. It’s typically used in a page header bar to indicate multiple page-level actions a user can take.

import MultiActionButton from '@activecampaign/camp-components-multi-action-button';
 
<MultiActionButton
  appearance="primary"
  options={[
    {
      text: 'Copy'
    },
    {
      text: 'Rename'
    },
    {
      text: 'Archive'
    }
  ]}
  triggerLabel="More options"
  optionToString={(option) => (option ? option.text : '')}
  onButtonClick={() => alert('Edit button clicked')}
  onOptionClick={(option) =>
    alert(`Option selected: ${optionToString(option)}`)
  }}
>
  Edit
</MultiActionButton>

Secondary button

The secondary multi-action button appearance is the default appearance. It is named to align with Camp’s secondary button. Use it within a table to provide a menu of table row actions to the user.

import MultiActionButton from '@activecampaign/camp-components-multi-action-button';
 
<MultiActionButton
  options={[
    {
      text: 'Copy'
    },
    {
      text: 'Rename'
    },
    {
      text: 'Archive'
    }
  ]}
  triggerLabel="More options"
  optionToString={(option) => (option ? option.text : '')}
  onButtonClick={() => alert('Edit button clicked')}
  onOptionClick={(option) =>
    alert(`Option selected: ${optionToString(option)}`)
  }}
>
  Edit
</MultiActionButton>

Usage

Best practices

• Be consistent with button placement. In button groupings and modals, the primary button should be the furthest to the right.
• While our buttons do have a disabled state, disabling a button should be avoided as much as possible due to lack of keyboard focus and low contrast. Instead of disabling the button, consider showing a banner or helper text to communicate to the user the needed information.

Sizes

Buttons come in two sizes, the default medium size and a small size. Which size of the button to use is based on both the importance of the action as well as the context of where it is placed.

• Medium buttons are used for all primary page actions
• Small buttons are best suited for supplementary page actions
• Small buttons can also be used in the headers of other components where height is limited
• If in groups, button sizes should not be mixed

Content guidelines

Button labels should be clearly and consisely written (no more than 3 words), in sentence case and with no punctuation at the end. Avoid unneccessary or ambiguous words, but include articles like “a” and “the,” as they provide clarity especially in translating. Use inclusive language that doesn’t discriminate from those who use assistive technology.

Accessibility

Keyboard support

• Move focus to a button using the tab key, and tab again to move to the dropdown arrow button (use shift + tab to move backwards)
• When the button or dropdown button has keyboard focus, use the space or enter key to perform action
• When the popover menu is open, use ↑ or ↓ to navigate the additional links
• space or enter can also be used to select an option from the list in the popover

Similar components

Button

Triggers an action when clicked.

Icon Button

A button that displays an icon instead of text.