ButtonIcon

Usage

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

<ButtonIcon />

API reference

Examples

Variants

Here's a view when buttons have different variants.

<Flex align="center">
  <ButtonIcon icon={<Icon name="cloud" />} variant="primary" />
  <ButtonIcon icon={<Icon name="cloud" />} variant="secondary" />
</Flex>

Sizes

Here's a view when buttons have different sizes.

<Flex align="center">
  <ButtonIcon icon={<Icon name="cloud" />} size="small" />
  <ButtonIcon icon={<Icon name="cloud" />} size="medium" />
</Flex>

Disabled

Here's a view when buttons are disabled.

<ButtonIcon icon={<Icon name="cloud" />} isDisabled />

Responsive

Here's a view when buttons are responsive.

<ButtonIcon icon={<Icon name="cloud" />} variant={{ initial: 'primary', lg: 'secondary' }} />

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

Changelog

• 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