metamask-extension/ui/components/component-library/button-link/README.mdx

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import { ButtonLink } from './button-link';
import { ButtonBase } from '../button-base';

# ButtonLink

The `ButtonLink` is an extension of `ButtonBase` to support link styles

<Canvas>
  <Story id="components-componentlibrary-buttonlink--default-story" />
</Canvas>

## Props

The `ButtonLink` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) and [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props

<ArgsTable of={ButtonLink} />

The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props

<ArgsTable of={ButtonBase} />

### Size

Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `Size.auto`.

Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `Size`

Possible sizes include:

- `Size.auto` sets the height to auto but retains `ButtonLink` font-size
- `Size.SM` 32px
- `Size.MD` 40px
- `Size.LG` 48px
- `Size.inherit` inherits the font-size of the parent element. Used for inline links in paragraphs.

<Canvas>
  <Story id="components-componentlibrary-buttonlink--size-story" />
</Canvas>

```jsx
import { Size } from '../../../helpers/constants/design-system';
import { ButtonLink, Text, TextVariant } from '../../component-library';

<ButtonLink size={Size.auto}>
  Auto (default)
</ButtonLink>
<ButtonLink size={Size.SM}>
  Small
</ButtonLink>
<ButtonLink size={Size.MD}>
  Medium
</ButtonLink>
<ButtonLink size={Size.LG}>
  Large
</ButtonLink>

<Text variant={TextVariant.bodyLgMedium}>
  Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text>
<Text variant={TextVariant.bodyMd}>
  Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text>
<Text variant={TextVariant.bodySm}>
  Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text>

<Text variant={TextVariant.bodyXs}>
  Inherits the font-size of the parent element and example with override for a success color.
   <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text>
```

### Danger

Use the `danger` boolean prop to change the `ButtonLink` to danger color.

<Canvas>
  <Story id="components-componentlibrary-buttonlink--danger" />
</Canvas>

```jsx
import { ButtonLink } from '../../component-library';

<ButtonLink>Normal</ButtonLink>
<ButtonLink danger>Danger</ButtonLink>
```

### Href

When an `href` prop is passed it will change the element to an anchor(`a`) tag.

<Canvas>
  <Story id="components-componentlibrary-buttonlink--href" />
</Canvas>

```jsx
import { ButtonLink } from '../../component-library';

<ButtonLink href="/">Href example</ButtonLink>;
```

### External Link

When an `externalLink` prop is passed it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes.

`rel="noreferrer noopener"` is used in links to prevent security vulnerabilities that can be exploited by malicious websites. It disables the window.opener property and prevents the new page from sending the referrer information, providing an additional layer of security.

<Canvas>
  <Story id="components-componentlibrary-buttonlink--external-link" />
</Canvas>

```jsx
import { ButtonLink } from '../../component-library';

<ButtonLink href="https://metamask.io" externalLink>
  Anchor element with external link
</ButtonLink>;
```

### Hit area

The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `Size.auto` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%.

<Canvas>
  <Story id="components-componentlibrary-buttonlink--hit-area" />
</Canvas>

```jsx
import { ButtonLink } from '../../component-library';

<ButtonLink paddingLeft={4} paddingRight={4}>
  Auto (default)
</ButtonLink>
<ButtonLink size={Size.SM} paddingLeft={4} paddingRight={4}>
  Small
</ButtonLink>
<ButtonLink size={Size.MD} paddingLeft={4} paddingRight={4}>
  Medium
</ButtonLink>
<ButtonLink size={Size.LG} paddingLeft={4} paddingRight={4}>
  Large
</ButtonLink>
<ButtonLink size={Size.LG} block>
  Large block
</ButtonLink>
```