browser/libs/components/src/link/link.mdx

import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";

import * as stories from "./link.stories";

<Meta of={stories} />

```ts
import { LinkModule } from "@bitwarden/components";
```

# Link / Text button

Text Links and Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action
the button takes:

- if navigating to a new page, use a `<a>`
- if taking an action on the current page, use a `<button>`

Text buttons or links are most commonly used in paragraphs of text or in forms to customize actions
or show/hide additional form options.

<Primary />

## Variants

You can use one of the following variants by providing it as the `linkType` input:

- `primary` - most common, uses brand color
- `secondary` - matches the main text color
- `contrast` - for high contrast against a dark background (or a light background in dark mode)
- `light` - always a light color, even in dark mode

## Sizes

If you want to display a link with a smaller text size, apply the `tw-text-sm` class. This will
match the `body2` variant of the Typography directive.

## With icons

Text Links/buttons can have icons on left or the right.

To indicate a new or add action, the <i class="bwi bwi-plus-circle"></i> icon on is used on the
left.

An angle icon, <i class="bwi bwi-angle-right"></i>, is used on the left to indicate an expand to
show/hide additional content.

## Accessibility

- Make sure to only use the Link on backgrounds that maintain the WCAG color contrast ratios.
- Be sure to select the correct element type (anchor or button) for the intended action.