ButtonIcon

An icon-only button with primary, secondary, and tertiary variants.

Usage#

import { ButtonIcon } from '@backstage/ui';
import { RiCloseLine } from '@remixicon/react';

<ButtonIcon icon={<RiCloseLine />} aria-label="Close" />

API reference#

Prop	Type	Default	Description
variant	primarysecondarytertiary	primary	Visual style. Use primary for main actions, secondary for alternatives, tertiary for low-emphasis.
size	smallmedium	small	Button size. Use small for toolbars, medium for standalone actions.
icon	ReactElement	-	Icon element to display. Required for accessibility via aria-label.
isDisabled	boolean	false	Prevents interaction and applies disabled styling.
loading	boolean	false	Shows a spinner and disables the button.
type	buttonsubmitreset	button	HTML button type attribute.
onSurface	0123dangerwarningsuccessauto	-	Surface context for correct color contrast.
className	string	-	Additional CSS class name for custom styling.
style	CSSProperties	-	Inline CSS styles object.

Inherits all React Aria Button props.

Examples#

Variants#

<Flex align="center" gap="2">
  <ButtonIcon icon={<RiCloudLine />} variant="primary" aria-label="Cloud" />
  <ButtonIcon icon={<RiCloudLine />} variant="secondary" aria-label="Cloud" />
  <ButtonIcon icon={<RiCloudLine />} variant="tertiary" aria-label="Cloud" />
</Flex>

Sizes#

<Flex align="center" gap="2">
  <ButtonIcon icon={<RiCloudLine />} size="small" aria-label="Cloud" />
  <ButtonIcon icon={<RiCloudLine />} size="medium" aria-label="Cloud" />
</Flex>

Disabled#

<Flex direction="row" gap="2">
  <ButtonIcon isDisabled icon={<RiCloudLine />} variant="primary" aria-label="Cloud" />
  <ButtonIcon isDisabled icon={<RiCloudLine />} variant="secondary" aria-label="Cloud" />
  <ButtonIcon isDisabled icon={<RiCloudLine />} variant="tertiary" aria-label="Cloud" />
</Flex>

Loading#

Shows a spinner during async operations.

<ButtonIcon icon={<RiCloudLine />} variant="primary" loading aria-label="Cloud" />

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-ButtonIcon
bui-ButtonIconContent
bui-ButtonIconSpinner

Changelog#

Version 0.10.0#

Changes

Fixed ButtonIcon incorrectly applying className to inner elements instead of only the root element. #31900

Version 0.9.0#

Changes

Added loading prop to Button and ButtonIcon components for displaying spinner during async operations. #31681