Props

Component props
Name
Type
Default
href
Required
string
-

Specifies a link URL.

text
Required
string
-

Text to render inside the Button to convey the function and purpose of the Button.

accessibilityLabel
string
-

Label to provide more context around Button’s function or purpose. See the Accessibility guidelines to learn more.,

color
"gray"
| "red"
| "blue"
| "transparent"
| "semiTransparentWhite"
| "transparentWhiteText"
| "white"
"gray"

The background color of Button.

dataTestId
string
-

Available for testing purposes, if needed. Consider better queries before using this prop.

disabled
boolean
false

Indicates if Button is disabled. Disabled Buttons are inactive and cannot be interacted with.

fullWidth
boolean
false

Default Buttons are sized by the text within the Button whereas full-width Buttons expand to the full width of their container.

iconEnd
unknown
-

An icon displayed after the text to help clarify the usage of Button. See the icon variant to learn more.

onClick
({|
  event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement>,
  dangerouslyDisableOnNavigation: () => void,
|}) => void
-

Callback invoked when the user clicks (press and release) on Button with the mouse or keyboard. Required with role="button" or type="button" Buttons.
See GlobalEventsHandlerProvider to learn more about link navigation.

rel
"none" | "nofollow"
"none"

Provides hints for SEO. See the MDN Web Docs to learn more.

size
"sm" | "md" | "lg"
"md"

sm: 32px, md: 40px, lg: 48px

tabIndex
-1 | 0
0

Default Buttons are sized by the text within the Button whereas full-width Buttons expand to the full width of their container.

target
null | "self" | "blank"
"null"

Indicates the browsing context where an href will be opened:

  • 'null' opens the anchor in the same window.
  • 'blank' opens the anchor in a new window.
  • 'self' opens an anchor in the same frame.

Usage guidelines

See Button.

Variants

rel and target

These optional props control the behavior of ButtonLink. External links commonly use target="_blank" to open the link in a new tab or window, and rel="nofollow" to provide hints for SEO.

ButtonLink announces to assistive technologies that the link opens in a new tab. Localize the default label with DefaultLabelProvider. Learn more
import { ButtonLink, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <ButtonLink
        accessibilityLabel="Visit Pinterest"
        iconEnd="visit"
        size="lg"
        text="Visit Pinterest"
        rel="nofollow"
        target="blank"
        href="#"
      />
    </Flex>
  );
}

Accessibility

Variants

External handlers

ButtonLink consumes external handlers from GlobalEventsHandlerProvider.

Handlers:

See GlobalEventsHandlerProvider for more information.

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Ready
Component responds to changing viewport sizes in web and mobile web.

Button
Use Button when an action is needed instead of a link.

ButtonGroup
When displaying multiple Buttons in a layout, use ButtonGroup to ensure consistent spacing and wrapping behavior.

IconButton
Use IconButton when only an icon is needed instead of text.

TapArea
Use TapArea to make non-button elements interactive, like an Image. This ensures the element interaction is accessible and uses Gestalt styles.

Tabs
Tabs are intended for page-level navigation between multiple URLs.

GlobalEventsHandlerProvider
GlobalEventsHandlerProvider allows external link navigation control across all children components with link behavior.
See GlobalEventsHandlerProvider to learn more about link navigation.

Edit page on GitHub
; Opens a new tab