Button

Usage#

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

<Button />

API reference#

Examples#

Variants#

Here's a view when buttons have different variants.

<Flex align="center">
  <Button iconStart="cloud" variant="primary">
    Button
  </Button>
  <Button iconStart="cloud" variant="secondary">
    Button
  </Button>
</Flex>

Sizes#

Here's a view when buttons have different sizes.

<Flex align="center">
  <Button size="small">Small</Button>
  <Button size="medium">Medium</Button>
</Flex>

With Icons#

Here's a view when buttons have icons.

<Flex align="center">
  <Button iconStart={<Icon name="cloud" />}>Button</Button>
  <Button iconEnd={<Icon name="chevronRight" />}>Button</Button>
  <Button iconStart={<Icon name="cloud" />} iconEnd={<Icon name="chevronRight" />}>Button</Button>
</Flex>

Disabled#

Here's a view when buttons are disabled.

<Flex gap="4">
  <Button variant="primary" isDisabled>
    Primary
  </Button>
  <Button variant="secondary" isDisabled>
    Secondary
  </Button>
</Flex>

Loading#

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

<Button variant="primary" loading={isLoading} onPress={handleClick}>
  Load more items
</Button>

Responsive#

Here's a view when buttons are responsive.

<Button variant={{ initial: 'primary', lg: 'secondary' }}>
  Responsive Button
</Button>

As Link#

If you want to use a button as a link, please use the ButtonLink component.

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

<ButtonLink href="https://ui.backstage.io" target="_blank">
  Button
</ButtonLink>

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-Button
• bui-Button[data-size="small"]
• bui-Button[data-size="medium"]
• bui-Button[data-size="large"]
• bui-Button[data-variant="primary"]
• bui-Button[data-variant="secondary"]
• bui-Button[data-variant="tertiary"]
• bui-Button[data-loading="true"]
• bui-Button[data-loading="false"]
• bui-ButtonContent
• bui-ButtonSpinner

Changelog#

• 0.9.0 - Added loading prop to Button and ButtonIcon components for displaying spinner during async operations. #31681
• 0.7.2 - Enable tooltips on disabled buttons with automatic wrapper #31230
• 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 - Remove the render prop from all button-related components. #30297
• 0.5.0 - Added a render prop to the Button component to use it as a link. #30165
• 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 - Improve Button & Checkbox styles #29127, #28789
• 0.2.0 - Improve Button types #29205