# @storybook/addon-links

> Storybook Links: Link stories together to build demos and prototypes with your UI components

Latest version **10.6.0** (published 2026-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook/addon-links
pnpm add @storybook/addon-links
yarn add @storybook/addon-links
bun add @storybook/addon-links
```

## Health

**Score 78/100 (B)** — status: active.

Positive: has types package; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo; extremely popular.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 10.6.0 |
| Published | 2026-09-02 |
| First published | 2017-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/storybook__addon-links) |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 91068 |
| Maintainers | ndelangen, shilman, tmeasday, ghengeveld, winkervsbecks, yannbf, kylegach, jreinhold, kasperpeulen, valentinpalkovic, domyen, storybook-bot |
| Keywords | storybook, storybook-addon, organize, links, navigation, component, components |

## Links

- npm: https://www.npmjs.com/package/@storybook/addon-links
- Repository: https://github.com/storybookjs/storybook
- Homepage: https://github.com/storybookjs/storybook/tree/next/code/addons/links
- Issues: https://github.com/storybookjs/storybook/issues
- Funding: https://opencollective.com/storybook
- npm.io page: https://npm.io/package/@storybook/addon-links

## Dependencies (1)

- [@storybook/global](https://npm.io/package/@storybook/global.md) ^5.0.0

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 10.6.0 (latest) — 2026-09-02
- 0.0.0-pr-36141-sha-6ddbeb4a (canary) — 2026-09-03
- 11.0.0-alpha.0 (next) — 2026-09-02
- 0.0.0-pr-35198-sha-9d05c353 (v9-canary) — 2026-06-17
- 7.6.24 (v7) — 2026-03-06
- 8.6.18 (v8) — 2026-03-06
- 0.0.0-pr-34011-sha-c45b0f3f (v7-canary) — 2026-03-06
- 9.1.20 (v9) — 2026-03-05
- 0.0.0-pr-34009-sha-c90626e7 (v8-canary) — 2026-03-04
- 8.2.10 (tag-for-publishing-older-releases) — 2024-11-04
- 7.1.1-pr-23508-1689802571-5ec8c1c3.0 (pr-23508) — 2023-07-19
- 7.1.1-pr-22631-1689802540-351503cb.0 (pr-22631) — 2023-07-19
- 7.1.0-alpha.29 (future) — 2023-06-06
- 6.5.17-alpha.0 (prerelease) — 2023-03-23
- 6.0.28-alpha.3 (debug) — 2020-10-29
- … 3464 more at https://npm.io/package/@storybook/addon-links/versions

## README

# Story Links Addon

The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org?ref=readme).

[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme)

## Getting Started

Install this addon by adding the `@storybook/addon-links` dependency:

```sh
yarn add -D @storybook/addon-links
```

within `.storybook/main.js`:

```js
export default {
  addons: ['@storybook/addon-links'],
};
```

Then you can import `linkTo` in your stories and use like this:

```js
import { linkTo } from '@storybook/addon-links';

export default {
  title: 'Button',
};

export const first = () => <button onClick={linkTo('Button', 'second')}>Go to "Second"</button>;
export const second = () => <button onClick={linkTo('Button', 'first')}>Go to "First"</button>;
```

Have a look at the linkTo function:

```js
import { linkTo } from '@storybook/addon-links';

linkTo('Toggle', 'off');
linkTo(
  () => 'Toggle',
  () => 'off'
);
linkTo('Toggle'); // Links to the first story in the 'Toggle' kind
```

With that, you can link an event in a component to any story in the Storybook.

- First parameter is the story kind name (what you named with `title`).
- Second (optional) parameter is the story name (what you named with `exported name`).
  If the second parameter is omitted, the link will point to the first story in the given kind.

You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string:

```js
import { linkTo } from '@storybook/addon-links';
import LinkTo from '@storybook/addon-links/react';

export default {
  title: 'Select',
};

export const index = () => (
  <select value="Index" onChange={linkTo('Select', (e) => e.currentTarget.value)}>
    <option>index</option>
    <option>first</option>
    <option>second</option>
    <option>third</option>
  </select>
);
export const first = () => <LinkTo story="index">Go back</LinkTo>;
export const second = () => <LinkTo story="index">Go back</LinkTo>;
export const third = () => <LinkTo story="index">Go back</LinkTo>;
```

## hrefTo function

If you want to get an URL for a particular story, you may use `hrefTo` function. It returns a promise, which resolves to string containing a relative URL:

```js
import { hrefTo } from '@storybook/addon-links';
import { action } from 'storybook/actions';

export default {
  title: 'Href',
};

export const log = () => {
  hrefTo('Href', 'log').then(action('URL of this story'));

  return <span>See action logger</span>;
};
```

## withLinks decorator

`withLinks` decorator enables a declarative way of defining story links, using data attributes.
Here is an example in React, but it works with any framework:

```js
import { withLinks } from '@storybook/addon-links';

export default {
  title: 'Button',
  decorators: [withLinks],
};

export const first = () => (
  <button data-sb-kind="OtherKind" data-sb-story="otherStory">
    Go to "OtherStory"
  </button>
);
```

## LinkTo component (React only)

One possible way of using `hrefTo` is to create a component that uses native `a` element, but prevents page reloads on plain left click, so that one can still use default browser methods to open link in new tab.
A React implementation of such a component can be imported from `@storybook/addon-links` package:

```js
import LinkTo from '@storybook/addon-links/react';

export default {
  title: 'Link',
};

export const first = () => <LinkTo story="second">Go to Second</LinkTo>;
export const second = () => <LinkTo story="first">Go to First</LinkTo>;
```

It accepts all the props the `a` element does, plus `story` and `kind`. It the `kind` prop is omitted, the current kind will be preserved.

```mdx
<LinkTo
  kind="Toggle"
  story="off"
  target="_blank"
  title="link to second story"
  style={{ color: '#1474f3' }}
>
  Go to Second
</LinkTo>
```

To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/next/code/addons/links/src/react/components/RoutedLink.tsx) for reference.

Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

---
_Source: https://npm.io/package/@storybook/addon-links · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._