Button

Buttons are used primarily to draw attention and initiate action, whether as a singular call to action or in groupings for the user to make a decision from.

Overview

Primary button

Secondary button

Text button

Resources

Install

yarn add @activecampaign/camp-components-button

Variations

There are multiple variations of button appearances in Camp, each with intended purpose and hierarchy.

Primary button

Also referred to as the fill button, the primary button is meant to draw attention as the primary call to action. Think of the primary button as the highest priority action on the page, and should only appear on the page or in a section once.

import Button from '@activecampaign/camp-components-button';
 
<Button>Submit</Button>;

Secondary button

Also referred to as the outline button, the secondary button can either appear alone or to support the primary button. Unlike the primary button, multiples of the secondary button can appear together in groups.

import Button from '@activecampaign/camp-components-button';
 
<Button.Outline>Import</Button.Outline>;

Text button

Text buttons look more like a link at first glance, but cover more surface area with a background hover state, giving them more hierarchy than a regular link. Text buttons work well acting as tertiary buttons, especially in button groups, or inside other components.

import Button from '@activecampaign/camp-components-button';
 
<Button.Text>Read my report</Button.Text>;

Destructive button

Destructive buttons are used to confirm what is likely to be irreversable action for the user, such as deleting data. It should be used sparingly.

import Button from '@activecampaign/camp-components-button';
 
<Button appearance="destructive">Delete account</Button>;

Destructive text button

Additionally, destructive text buttons can be used as a less severe option than the filled destructive button, often when there is more than one destructive option or an option in a modal where the primary button is still the call to action but there needs to be a destructive secondary action.

import Button from '@activecampaign/camp-components-button';
 
<Button.Text appearance="destructive">Discard changes</Button.Text>;

Loading button

A button can be set to a loading state to indicate that a submission has occurred, and content is loading or actions are occurring in the background. The button automatically retains its width and replaces the button text with a loading indicator.

<Button disabled loadingIndicator>
  Submit
</Button>

Usage

Setting button as a link

A button can be set as a link by passing as='a'

import Button from '@activecampaign/camp-components-button';
 
<Button as="a">I am a link styled like a button</Button>;

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

Icons

Icons should be used sparingly in buttons and are reserved for branded actions, such as Personalize. An icon can be added to primary, secondary, and text button. To utilize an icon in a button, import the icon as well as the button component. There should be sp-300 (8px) of space between the icon and text in the button.

import Button from '@activecampaign/camp-components-button';
import { Upload } from '@activecampaign/camp-components-icon';
 
<Button.Outline>
  <Upload mr={['sp300']} fill="slate600" size="medium" title="import" />
  Import
</Button.Outline>;

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
• When the button has keyboard focus, use the space or enter key to perform action

Similar components

Multi-Action Button

Allows for multiple actions with one primary action.

Icon Button

A button that displays an icon instead of text.