import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

Links are typically used as a means of navigation either within the application, to a place outside, or to a resource. For anything else, especially things that change data and actions, you should be using a `button`.
Links can have the same properties as a regular `<a>`-element.

Links is based on a fork from [Carbon Components](https://www.carbondesignsystem.com/components/link/code)

### When to use

- ✓ Use text for links rather than graphics or icons.
- ✓ Links should be three words or less.
- ✓ Text should be consistent with the title of the intended destination.
- ✓ Navigate to a different page within the application
- ✓ Navigate to an entirely different site
- ✓ Jump to an element on the same page
- ✓ Link to emails or phone numbers

### When not to use

- ✗ Avoid the term “click here“, “other links“ to “here,” or the web address itself. Instead, use a meaningful descriptive label for the link, and match the destination site name.
- ✗ Use a button instead of a link for actions that will change data or manipulate how it is displayed, change a state, or trigger an action. Buttons should never be used for navigational actions.

### Use with react-router

Use the Link styling by adding the className `wfp--link` to `<NavLink />`

```js
<NavLink className="wfp--link">Link</NavLink>
```

### Related

[Button](?path=/docs/components-button--button-regular)

### Reference

[Carbon Design System Usage for Link](https://www.carbondesignsystem.com/components/link/usage)
