Link

import {Container} from '@sentry/scraps/layout'; import {ExternalLink, Link} from '@sentry/scraps/link'; import {Text} from '@sentry/scraps/text';

import * as Storybook from 'sentry/stories';

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

The Link component provides context-aware navigation within the Sentry application, while ExternalLink handles external URLs. Both components maintain consistent styling and accessibility standards.

Internal Links

Use <Link> for navigation within the Sentry application. The component uses React Router under the hood and falls back to a standard anchor tag when no router context is available.

<Storybook.Demo>

<Link to="/organizations/sentry/issues/">Navigate to Issues</Link> </Storybook.Demo> ```jsx <Link to="/organizations/sentry/issues/">Navigate to Issues</Link> ```

Link Target Format

The to prop accepts either a string path or a LocationDescriptor object. When using literal paths, always use slug-based URLs to ensure compatibility across different deployment environments (customer domains and single-tenant).

<Storybook.Demo> <Storybook.SideBySide vertical> <Link to="/organizations/sentry/issues/">String path</Link> <Link to={{pathname: '/settings/account/'}}>LocationDescriptor object</Link> </Storybook.SideBySide> </Storybook.Demo>

jsx

<Link to="/organizations/sentry/issues/">String path</Link>
<Link to={{pathname: '/settings/account/'}}>LocationDescriptor object</Link>

External Links

Use <ExternalLink> for links to external websites. By default, external links open in a new tab.

<Storybook.Demo> <ExternalLink href="https://docs.sentry.io">Visit Sentry Docs</ExternalLink> </Storybook.Demo>

jsx

<ExternalLink href="https://docs.sentry.io">Visit Sentry Docs</ExternalLink>

Opening in Same Tab

Set openInNewTab={false} to open external links in the same tab.

<Storybook.Demo> <Storybook.SideBySide vertical> <ExternalLink href="https://docs.sentry.io">Opens in new tab (default)</ExternalLink> <ExternalLink href="https://docs.sentry.io" openInNewTab={false}> Opens in same tab </ExternalLink> </Storybook.SideBySide> </Storybook.Demo>

jsx

<ExternalLink href="https://docs.sentry.io">Opens in new tab (default)</ExternalLink>
<ExternalLink href="https://docs.sentry.io" openInNewTab={false}>
  Opens in same tab
</ExternalLink>

Disabled Links

Use the disabled prop to disable link navigation while maintaining visual presence.

<Storybook.Demo> <Storybook.SideBySide vertical> <Link to="/organizations/sentry/issues/">Active link</Link> <Link to="/organizations/sentry/issues/" disabled> Disabled link </Link> </Storybook.SideBySide> </Storybook.Demo>

jsx

<Link to="/issues/">Active link</Link>
<Link to="/issues/" disabled>
  Disabled Link
</Link>

Inline Links

Both <Link> and <ExternalLink> components can be used inline in <Text> components to give a styled link.

<Storybook.Demo> <Container padding="md"> <Text> This is a paragraph with an{' '} <Link to="/organizations/sentry/issues/">inline link</Link> that inherits text styling. </Text> </Container> </Storybook.Demo>

jsx

<Text>
  This is a paragraph with an <Link to="/organizations/sentry/issues/">inline link</Link>{' '}
  that inherits text styling.
</Text>