LinkButton

import {Alert} from '@sentry/scraps/alert'; import {LinkButton} from '@sentry/scraps/button';

import { IconAdd, IconArrow, IconChevron, IconClock, IconClose, IconDelete, IconDocs, IconEdit, IconEllipsis, IconLightning, IconLink, IconOpen, IconStar, IconZoom, } from 'sentry/icons'; import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/button/linkButton');

LinkButtons combine the visual appearance of buttons with navigation functionality. Use LinkButton when you need to navigate to a different URL or route while maintaining consistent button styling.

Basic Usage

LinkButton supports two types of navigation: internal routing with the to prop and external links with the href prop.

jsx

// Internal navigation
<LinkButton to="/settings">Go to Settings</LinkButton>

// External link
<LinkButton href="https://docs.sentry.io">Documentation</LinkButton>

Use the to prop for internal app navigation. This renders as a Link component and supports client-side routing.

<Storybook.Demo> <LinkButton to="/organizations/settings">Organization Settings</LinkButton> <LinkButton to="/projects">View Projects</LinkButton> </Storybook.Demo>

jsx

<LinkButton to="/organizations/settings">Organization Settings</LinkButton>
<LinkButton to="/projects">View Projects</LinkButton>

Use the href prop for external URLs. External links automatically open in a new tab with security attributes.

<Storybook.Demo> <LinkButton href="https://docs.sentry.io" external> Documentation </LinkButton> <LinkButton href="https://github.com/getsentry/sentry" external> GitHub </LinkButton> </Storybook.Demo>

jsx

<LinkButton href="https://docs.sentry.io" external>
  Documentation
</LinkButton>
<LinkButton href="https://github.com/getsentry/sentry" external>
  GitHub
</LinkButton>

Opening Internal Links in a New Tab

In rare cases, you may need an internal link to open in a new tab. Use the openInNewTab prop with to.

<Storybook.Demo> <LinkButton to="/explore/logs" openInNewTab> Open Logs in New Tab </LinkButton> </Storybook.Demo>

jsx

<LinkButton to="/explore/logs" openInNewTab>
  Open Logs in New Tab
</LinkButton>

[!WARNING] Use openInNewTab sparingly. Opening internal links in a new tab breaks the single-page app navigation flow and should only be used when users need to preserve their current context (e.g., opening a reference page from a drawer).

Sizes

LinkButtons are available in the same sizes as regular buttons.

<Storybook.Demo> <LinkButton size="md" to="/medium"> Medium (default) </LinkButton> <LinkButton size="sm" to="/small"> Small </LinkButton> <LinkButton size="xs" to="/extra-small"> Extra small </LinkButton> <LinkButton size="zero" to="/zero"> Zero </LinkButton> </Storybook.Demo>

jsx

<LinkButton size="md" to="/medium">
  Medium (default)
</LinkButton>
<LinkButton size="sm" to="/small">
  Small
</LinkButton>
<LinkButton size="xs" to="/extra-small">
  Extra small
</LinkButton>
<LinkButton size="zero" to="/zero">
  Zero
</LinkButton>

Icons

LinkButtons support an optional leading icon, following the same patterns as regular buttons.

[!TIP] You do not typically need to set the size prop for the icon, the LinkButton wraps the rendered Icon in an IconDefaultsProvider to provide an icon size proportional to the button size.

<Storybook.Demo> <LinkButton icon={<IconOpen />} variant="primary" to="/dashboard"> Open Dashboard </LinkButton> <LinkButton icon={<IconDocs />} href="https://docs.sentry.io" external> Read Docs </LinkButton> </Storybook.Demo>

jsx

<LinkButton icon={<IconOpen />} variant="primary" to="/dashboard">
  Open Dashboard
</LinkButton>
<LinkButton icon={<IconDocs />} href="https://docs.sentry.io" external>
  Read Docs
</LinkButton>

The following table defines standardized call to action copy and icon pairings for LinkButtons.

Icon	Name	Copy	Meaning
<IconOpen />	`open`	Open in `Product`	Leaves existing view and goes to another product
<IconDocs />	`docs`	Read Docs	Similar to "Open In" but always goes to Sentry Docs

Disabled State

Disabled LinkButtons prevent navigation and show a non-interactive appearance.

<Storybook.Demo> <LinkButton disabled variant="primary" to="/disabled"> Disabled Primary </LinkButton> <LinkButton disabled to="/disabled"> Disabled Default </LinkButton> </Storybook.Demo>

jsx

<LinkButton disabled variant="primary" to="/disabled">
  Disabled Primary
</LinkButton>
<LinkButton disabled to="/disabled">
  Disabled Default
</LinkButton>

External Link Security

LinkButtons with the external prop automatically include security attributes (target="_blank", rel="noreferrer noopener") and always open in a new tab. External links cannot opt out of new-tab behavior.

<Storybook.Demo> <LinkButton href="https://docs.sentry.io" external variant="primary"> Secure External Link </LinkButton> </Storybook.Demo>

jsx

<LinkButton href="https://docs.sentry.io" external variant="primary">
  Secure External Link
</LinkButton>

Icon-only LinkButtons

For high information density interfaces, LinkButtons can display only an icon without text.

[!WARNING] Icon-only LinkButtons must include an aria-label for screen readers!

<Storybook.Demo> <LinkButton icon={<IconOpen />} aria-label="Open in new tab" href="https://docs.sentry.io" external /> <LinkButton icon={<IconEdit />} aria-label="Edit settings" to="/settings/edit" /> </Storybook.Demo>

jsx

<LinkButton
  icon={<IconOpen />}
  aria-label="Open in new tab"
  href="https://docs.sentry.io"
  external
/>
<LinkButton icon={<IconEdit />} aria-label="Edit settings" to="/settings/edit" />

Accessibility

LinkButtons automatically meet WCAG 2.2 AA compliance requirements and include proper role="button" attributes. They support keyboard navigation and focus management.

When using external links, the component automatically adds appropriate security attributes and considers accessibility implications of opening links in new tabs.

For optimal accessibility:

Always include aria-label for icon-only LinkButtons
Use descriptive link text that makes sense out of context
Consider using title prop for additional context when needed

Basic Usage

Navigation Types

Internal Navigation

External Navigation