ButtonIcon

A button component with a single icon that can be used to trigger actions.

Usage#

import { ButtonIcon } from '@backstage/ui';

<ButtonIcon />

API reference#

Prop	Type	Default	Responsive
variant	primarysecondarytertiary	primary	Yes
size	smallmedium	medium	Yes
icon	ReactNode	-	No
isDisabled	boolean	false	No
loading	boolean	false	No
type	buttonsubmitreset	button	No
className	string	-	No
style	CSSProperties	-	No

Examples#

Variants#

Here's a view when buttons have different 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#

Here's a view when buttons have different sizes.

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

Disabled#

Here's a view when buttons are 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#

Here's a view when buttons are in a loading state.

<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#

0.9.0 - Added loading prop to Button and ButtonIcon components for displaying spinner during async operations. #31681
0.6.0 - Improve Button, ButtonIcon and ButtonLink styling. #30448
0.6.0 - New tertiary variant to Button, ButtonIcon and ButtonLink. #30453
0.6.0 - Rename IconButton to ButtonIcon. #30297
0.6.0 - Remove the render prop from all button-related components. #30297
0.5.0 - Button, ButtonLink, ButtonIcon now default to size small instead of medium #30085, #30097
0.4.0 - Improve icon props on Button and IconButton #29667
0.2.0 - New IconButton component #29239