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

Props

Prop	Type	Default	Description
`onClick` †	`MouseEventHandler<HTMLSpanElement \| HTMLButtonElement>`	—
`appearance`	`"default" \| "floating" \| "flush"`	`default`	When set, the button’s visual context will update to match a specific intention
`aria-label`	`string`	—	The aria-label for the button. Defines a string value that labels the current element. @see aria-labelledby.
`disabled`	`boolean`	—	Set to be disabled
`style` †	`CSSProperties`	—
`ref` †	`LegacyRef<HTMLSpanElement \| HTMLButtonElement>`	—	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
`aria-expanded` †	`Booleanish`	—	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`type` †	`"submit" \| "reset" \| "button"`	—
`aria-haspopup` †	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	—	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-pressed` †	`boolean \| "true" \| "false" \| "mixed"`	—	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
`onKeyDown` †	`KeyboardEventHandler<HTMLSpanElement \| HTMLButtonElement>`	—
`active`	`boolean`	—	An active state applying the active styling.
`aria-controls` †	`string`	—	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
`aria-describedby` †	`string`	—	Identifies the element (or elements) that describes the object. @see aria-labelledby
`className` †	`string`	—
`id` †	`string`	—
`onBlur` †	`FocusEventHandler<HTMLSpanElement \| HTMLButtonElement>`	—
`onFocus` †	`FocusEventHandler<HTMLSpanElement \| HTMLButtonElement>`	—
`onMouseEnter` †	`MouseEventHandler<HTMLSpanElement \| HTMLButtonElement>`	—
`onMouseLeave` †	`MouseEventHandler<HTMLSpanElement \| HTMLButtonElement>`	—
`noButton`	`boolean`	—	If you want it to NOT be a button element, set this to true (sets it to a span element).

Generated from @camp/icon-button@5.22.0 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

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

Update Import Path: Replace the old icon-button imports with IconButton from @camp/icon-button.
Remove icon Prop: Remove the icon prop from the IconButton component as it is no longer needed.
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>
...

Production Examples

More states from @camp/icon-button's visual test stories, ranked by production usage. Variations already documented above are not repeated here.

Default Appearance Disabled

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

Flush Appearance Disabled

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

Flush Appearance

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

Floating Appearance Disabled

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

Floating Appearance

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

Active Prop

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

1 more variation in Storybook

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
Loading...	`Close`	Close, dismiss
Loading...	`XCircle`	Remove
Loading...	`DeleteTrash`	Remove
Loading...	`EyeOpen`	Show
Loading...	`EyeClosed`	Hide
Loading...	`Drag`	Drag
Loading...	`Reorder`	Reorder
Loading...	`Lightning`	Personalize
Loading...	`SavedResponse`	Saved response
Loading...	`SettingsCog`	Settings
Loading...	`MoreMenu`	More
Loading...	`CallPhone`	Call
Loading...	`EmailMessage`	Email
Loading...	`ComputerDesktop`	Desktop view
Loading...	`ComputerLaptop`	Laptop view
Loading...	`Tablet`	Tablet view
Loading...	`Phone`	Mobile view
Loading...	`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.