Icon button

Icon buttons are used to initiate action, using an icon in place of a text label.

Overview

Resources

Install

yarn add @camp/icon-button

Upgrading to Next Gen

🔄 More direct syntax: Nest your Icon component inside the icon-button.

🚀 Decreased Icon bundle size: The latest version of Icon boasts a 99% decrease in bundle size!

Previous implementation

Previously, you passed the icon into the IconButton component:

import IconButton from '@activecampaign/camp-components-icon-button';
 
export default function () {
  return <IconButton icon="accountBusiness" />;
}

New implementation

Now, pass your icon in as a child element.

import { IconButton } from '@camp/icon-button';
import { AccountBusiness } from '@camp/icon';
 
export default function () {
  return (
    <IconButton>
      <AccountBusiness />
    </IconButton>
  );
}

Migration steps

1. Update Import Path: Replace the old icon-button imports with IconButton from @camp/icon-button.
2. Remove icon Prop: Remove the icon prop from the IconButton component as it is no longer needed.
3. Import the Icon you need and add it as a child component: See example above and Icon Next Gen docs for more details.

Variations

Icon buttons are similar in function and styling to button but utilize an icon without a text label to save space. There are three icon button appearances in Camp: contained, floating, and flush.

Contained icon button

The contained icon button should be used when an icon button is being used on its own or to when needed to call the most attention to it in design.

import { IconButton } from '@camp/icon-button';
import { AddMedium } from '@camp/icon';
 
...
<IconButton>
  <AddMedium />
</IconButton>
...

Floating icon button

The floating icon button is used when multiple icon buttons are grouped together and are closely associated. It should also be used if the icon button is inside of a container with a border, such as inside a card.

import { IconButton } from '@camp/icon-button';
import { AddMedium } from '@camp/icon';
 
...
<IconButton appearance='floating'>
  <AddMedium />
</IconButton>
...

Flush icon button

The flush icon button should be used sparingly and only when space is very limited. Any size icon can be a flush icon button, although it is discouraged to use any icons smaller than medium due to this icon’s much smaller click target.

import { IconButton } from '@camp/icon-button';
import { AddMedium } from '@camp/icon';
 
...
<IconButton appearance='flush'>
  <AddMedium />
</IconButton>
...

Usage

Use an icon button when the purpose of your button can be easily and universally understood using an icon in place of a text label.

Common actions

Best practices

• When possible, use a tooltip with the icon button so users can hover or focus the button to make it clear what the button does.
• An icon button’s purpose should never need to be explained with an informational tooltip. If the tooltip on hover can’t be labeled in under a few words, use a regular button instead.
• When using an icon outside common actions, validate that the icon can be easily understood by quickly testing with our ActiveCampaign Community.

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

Button

Triggers an action when clicked.

Multi-Action Button

Allows for multiple actions with one primary action.