Icon button

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

Overview

Resources

Install


yarn add @activecampaign/camp-components-icon-button

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 '@activecampaign/camp-components-icon-button';
 
export default function () {
  return <IconButton icon="accountBusiness" />;
}

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 '@activecampaign/camp-components-icon-button';
 
export default function () {
  return <IconButton appearance="floating" icon="accountBusiness" />;
}

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 '@activecampaign/camp-components-icon-button';
 
export default function () {
  return <IconButton appearance="flush" icon="accountBusiness" />;
}

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

Icon	Name	Action
	`Close`	Close, dismiss
	`XCircle`	Remove
	`DeleteTrash`	Remove
	`EyeOpen`	Show
	`EyeClosed`	Hide
	`Drag`	Drag
	`Reorder`	Reorder
	`Lightning`	Personalize
	`SavedResponse`	Saved response
	`SettingsCog`	Settings
	`MoreMenu`	More
	`CallPhone`	Call
	`EmailMessage`	Email
	`ComputerDesktop`	Desktop view
	`ComputerLaptop`	Laptop view
	`Tablet`	Tablet view
	`Phone`	Mobile view
	`Preview`	Preview

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.