ButtonIcon

This component should be used when icons are meant to be clicked on.

It handles the two largest usecases we have for clickable icons: actions and toggles.

• Always try use when an icon is meant to be clicked on.
• Always provide developers with copy for the tooltip.
• If the button holds the ON / OFF state of something, then use the Toggle variants.
• If the button is floating on top of something else, use the Floating variant.
• Only use size XS when absolutely unavoidable.
• Spacing between buttons should be at least 4px (XXS), 8px is best (XS).

Zoning

Style

Variations

Default

This is the go-to ButtonIcon for most generic actions.

Toggle

If the button needs to hold an active / inactive state, then it is a Toggle.

Don’t use Toggles in series, opt for badge dropdowns instead.

Floating

This variant is only used when the button floats on top of content.

It could be it's sitting on top of a line connecting two nodes, or sticky on top of a draggable scene for instance.

States

ButtonIcons can display a "loading" state for asynchronous actions.

Loading

Only use when necessary to avoid multiple clicks when the action is not instant.

Skeleton

Skeletons are placeholders for UIs that are not yet ready but will feature a ButtonIcon.

The Loading state is for asynchronous tasks where the Button (and the button only) represents a pending state.

Skeleton needs are handled by the Skeleton component. Use SkeletonButtonIcon or the right variant prop on Skeleton.

The Skeleton Documentation is over there!

Interaction

All buttons have interactive states for "hover", "active" and "disabled". A focus ring should also be displayed on keyboard navigation.

Content

All ButtonIcons carry a tooltip on hover. The content of that tooltip should be short ("do something") and effective.

Usage

You have access to three components with curated props for each.

ButtonIcon

ButtonIconToggle

ButtonIconFloating

Button props

Of course all buttons can also use natural <button> attributes (but not classNames nor style).

Accessibility

In order to be semantically correct, ButtonIconToggle's active state is dependent on the aria-pressed attribute being set to true.

This attribute is transparent to consumers of the component and providing the mandatory isActive prop will actually assign the correct aria-pressed value.