Button

A button component that can be used to trigger actions.

API reference

Prop	Type	Default	Responsive
variant	primarysecondary	primary	Yes
size	smallmedium	medium	Yes
iconStart	ReactNode	-	No
iconEnd	ReactNode	-	No
isDisabled	boolean	false	No
children	ReactNode	-	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">
  <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>

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.

Button Button Button

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

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