ButtonLink

A button component that can be used as a link.

Usage#

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

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

API reference#

Prop	Type	Default	Responsive
variant	primarysecondarytertiary	primary	Yes
size	smallmedium	medium	Yes
iconStart	ReactNode	-	No
iconEnd	ReactNode	-	No
isDisabled	boolean	false	No
href	string	-	No
target	_self_blank_parent_top	-	No
children	ReactNode	-	No
className	string	-	No
style	CSSProperties	-	No

Examples#

Variants#

Here's a view when buttons have different variants.

Button Button Button

<Flex align="center">
  <ButtonLink
    iconStart={<RiCloudLine />}
    variant="primary"
    href="https://ui.backstage.io"
    target="_blank"
  >
    Button
  </ButtonLink>
  <ButtonLink
    iconStart={<RiCloudLine />}
    variant="secondary"
    href="https://ui.backstage.io"
    target="_blank"
  >
    Button
  </ButtonLink>
  <ButtonLink
    iconStart={<RiCloudLine />}
    variant="tertiary"
    href="https://ui.backstage.io"
    target="_blank"
  >
    Button
  </ButtonLink>
</Flex>

Sizes#

Here's a view when buttons have different sizes.

Small Medium

<Flex align="center">
  <ButtonLink size="small" href="https://ui.backstage.io" target="_blank">
    Small
  </ButtonLink>
  <ButtonLink size="medium" href="https://ui.backstage.io" target="_blank">
    Medium
  </ButtonLink>
</Flex>

With Icons#

Here's a view when buttons have icons.

Button Button Button

<Flex align="center">
  <ButtonLink iconStart={<RiCloudLine />} href="https://ui.backstage.io" target="_blank">
    Button
  </ButtonLink>
  <ButtonLink iconEnd={<RiArrowRightSLine />} href="https://ui.backstage.io" target="_blank">
    Button
  </ButtonLink>
  <ButtonLink
    iconStart={<RiCloudLine />}
    iconEnd={<RiArrowRightSLine />}
    href="https://ui.backstage.io"
    target="_blank"
  >
    Button
  </ButtonLink>
</Flex>

Disabled#

Here's a view when buttons are disabled.

PrimarySecondaryTertiary

<Flex gap="4">
  <ButtonLink variant="primary" isDisabled href="https://ui.backstage.io" target="_blank">
    Primary
  </ButtonLink>
  <ButtonLink variant="secondary" isDisabled href="https://ui.backstage.io" target="_blank">
    Secondary
  </ButtonLink>
  <ButtonLink variant="tertiary" isDisabled href="https://ui.backstage.io" target="_blank">
    Tertiary
  </ButtonLink>
</Flex>

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

Changelog#

0.8.0 - Add react router for internal routing for ButtonLinks #31276
0.7.2 - Add react router for internal routing for ButtonLinks #31276
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 - New ButtonLink, which replaces the previous render prop pattern on Button and IconButton. #30297
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