Button

Usage#

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

<Button />

API reference#

Examples#

Variants#

Here's a view when buttons have different variants.

<Flex>
      <Button variant="primary" iconStart={<RiCloudLine />}>
        Button
      </Button>
      <Button variant="secondary" iconStart={<RiCloudLine />}>
        Button
      </Button>
      <Button variant="tertiary" iconStart={<RiCloudLine />}>
        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={<RiCloudLine />}>Button</Button>
      <Button iconEnd={<RiArrowRightSLine />}>Button</Button>
      <Button iconStart={<RiCloudLine />} iconEnd={<RiArrowRightSLine />}>
        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>
      <Button variant="tertiary" isDisabled>
        Tertiary
      </Button>
    </Flex>

Loading#

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

<Button variant="primary" loading={true}>
      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.

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

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