Button

A button with primary, secondary, and tertiary variants, destructive styling, and loading state.

Usage#

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

<Button>Click me</Button>

API reference#

Prop	Type	Default	Description
variant	primarysecondarytertiary	primary	Visual style. Use primary for main actions, secondary for alternatives, tertiary for low-emphasis.
destructive	boolean	false	Applies destructive styling for dangerous actions like delete or remove.
size	smallmedium	small	Button size. Use small for dense layouts.
iconStart	ReactElement	-	Icon displayed before the button text.
iconEnd	ReactElement	-	Icon displayed after the button text.
isDisabled	boolean	false	Prevents interaction and applies disabled styling.
loading	boolean	false	Shows a spinner and disables the button.
children	ReactNode	-	Button label text or content.
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>
  <Button variant="primary" iconStart={<RiCloudLine />}>
    Button
  </Button>
  <Button variant="secondary" iconStart={<RiCloudLine />}>
    Button
  </Button>
  <Button variant="tertiary" iconStart={<RiCloudLine />}>
    Button
  </Button>
</Flex>

Sizes#

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

With Icons#

Icons can appear before or after the label.

<Flex align="center">
  <Button iconStart={<RiCloudLine />}>Button</Button>
  <Button iconEnd={<RiArrowRightSLine />}>Button</Button>
  <Button iconStart={<RiCloudLine />} iconEnd={<RiArrowRightSLine />}>
    Button
  </Button>
</Flex>

Disabled#

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

Destructive#

Use the destructive prop for dangerous actions like delete or remove.

<Flex gap="4">
  <Button variant="primary" destructive>
    Primary
  </Button>
  <Button variant="secondary" destructive>
    Secondary
  </Button>
  <Button variant="tertiary" destructive>
    Tertiary
  </Button>
</Flex>

Loading#

Shows a spinner and disables interaction during async operations.

<Button variant="primary" loading={true}>
  Load more items
</Button>

Responsive#

Button props accept responsive breakpoint objects.

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

Button

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-ButtonContent
bui-ButtonSpinner

Changelog#

Version 0.11.0#

Changes

Fixes disabled state in primary and secondary buttons in Backstage UI. #32297
Fixed disabled tertiary buttons incorrectly showing hover effects on surfaces. #32385

Version 0.9.0#

Changes

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