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

Resources

Install

yarn add @camp/button

Upgrading to Next Gen

🎨 Updated color palette and style refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

🔄 Unified component with appearance prop: Removal of dot notation for more flexibility in the button component. The appearance prop makes it easy to change the appearance of the button.

💡 Improved Design Consistency: Updating the naming convention to reflect common design terms (e.g., changing “Outline” to “Secondary”) ensures that the component library aligns more closely with industry standards, enhancing understanding and usability.

Previous implementation

Previously, the button was implemented with dot notation. The secondary button in design files translated to the outline button in code.

// Secondary Button
import { Button } from 'activecampaign/camp-components-button';
 
<Button.Outline>Some text</Button.Outline>;

New implementation

The appearance prop replaces dot notation, simplifying implementation. The outline button is now referred to as the secondary button.

// Secondary Button
import { Button } from '@camp/button';
 
<Button appearance="secondary">Some text</Button>;

Migration steps

1. Update import statements: replace import {Button} from '@activecampaign/camp-components-button' wtih import {Button} from '@camp/button'
2. Update references: Update references to <Button.Outline> and <Button.Text> to <Button appearance="secondary"> and <Button appearance="text"> respectively.

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.

 
<Button>Button</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.

 
<Button appearance="secondary">Secondary Button Medium</Button>

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 '@camp/button';
 
<Button appearance="text">Text Button Medium</Button>

Destructive buttons

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 '@camp/button';
 
<Button destructive>Button</Button>

Destructive text buttons

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 '@camp/button';
 
<Button appearance="text" destructive>
  Text Destructive Medium
</Button>

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.

import { Button } from '@camp/button';
 
<Button loadingIndicator>Button</Button>;

Button as Link

In Camp Next Gen, this functionality has moved to the Next Gen Link component.

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

import { Button } from '@camp/button';
 
<Button size="small">Button</Button>;

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 space-2 (8px) of space between the icon and text in the button.

To add an icon into a button, pass <Icon> in via children.

Disabled

The button should be disabled when its form content isn’t completed. Disabled should be utilized in combination with appropriate error messages to avoid confusion.

 
<Button disabled>Primary Disabled Button</Button>

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.