ButtonLink

Usage

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

<ButtonLink />

API reference

Examples

Variants

Here's a view when buttons have different variants.

<Flex align="center">
  <ButtonLink iconStart={<Icon name="cloud" />} variant="primary">
    Button
  </ButtonLink>
  <ButtonLink iconStart={<Icon name="cloud" />} variant="secondary">
    Button
  </ButtonLink>
</Flex>

Sizes

Here's a view when buttons have different sizes.

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

With Icons

Here's a view when buttons have icons.

<Flex align="center">
  <ButtonLink iconStart={<Icon name="cloud" />}>Button</ButtonLink>
  <ButtonLink iconEnd={<Icon name="chevronRight" />}>Button</ButtonLink>
  <ButtonLink
    iconStart={<Icon name="cloud" />}
    iconEnd={<Icon name="chevronRight" />}>
    Button
  </ButtonLink>
</Flex>

Disabled

Here's a view when buttons are disabled.

<Flex gap="4">
  <ButtonLink variant="primary" isDisabled>
    Primary
  </ButtonLink>
  <ButtonLink variant="secondary" isDisabled>
    Secondary
  </ButtonLink>
</Flex>

Responsive

Here's a view when buttons are responsive.

<ButtonLink variant={{ initial: 'primary', lg: 'secondary' }}>
  Responsive Button
</ButtonLink>

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