Version 0.11.2

ButtonLink

A button-styled link with primary, secondary, and tertiary variants.

ButtonButtonButton

Usage#

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

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

API reference#

PropTypeDefaultDescription
variant
primarysecondarytertiary
primaryVisual style. Use primary for main actions, secondary for alternatives, tertiary for low-emphasis.
size
smallmedium
smallLink size. Use small for inline contexts, medium for standalone.
iconStart
ReactElement
-Icon displayed before the link text.
iconEnd
ReactElement
-Icon displayed after the link text.
isDisabled
boolean
falsePrevents interaction and applies disabled styling.
href
string
-URL the link navigates to.
target
_self_blank_parent_top
-Where to open the linked URL. Use _blank for external links.
onSurface
0123dangerwarningsuccessauto
-Surface context for correct color contrast.
children
ReactNode
-
className
string
-Additional CSS class name for custom styling.
style
CSSProperties
-Inline CSS styles object.

Inherits all React Aria Link props.

Examples#

Sizes#

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

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

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
  • bui-ButtonLinkContent

Changelog#