# Link

Source: https://iriscss.com/documentation/elements/link/

Links take their color from the color classes and mix it toward the text color, so they stay readable.

A link without a class uses the neutral base color. It underlines on hover and shows a focus ring for keyboard users. `role="link"` gets the same look.

```html
<p>Read the <a href="#">getting started guide</a> first.</p>
```

## Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) changes only the text color, never the background.

```html
<p>
  <a href="#" class="primary">Primary</a> &middot;
  <a href="#" class="secondary">Secondary</a> &middot;
  <a href="#" class="contrast">Contrast</a> &middot;
  <a href="#" class="accent">Accent</a> &middot;
  <a href="#" class="info">Info</a> &middot;
  <a href="#" class="success">Success</a> &middot;
  <a href="#" class="warning">Warning</a> &middot;
  <a href="#" class="danger">Danger</a> &middot;
  <a href="#" class="link">Link</a>
</p>
```

## States and current page

`aria-current` marks the current page or item with the hover look. `.hover`, `.active` and `.focus` show a state without interaction, and `.disabled` fades the link and blocks clicks.

```html
<p>
  <a href="#" aria-current="page">Current page</a> &middot;
  <a href="#" class="hover">Hover</a> &middot;
  <a href="#" class="focus">Focus</a> &middot;
  <a class="disabled" aria-disabled="true">Disabled</a>
</p>
```

## Link as a button

`role="button"` turns a link into a [button](https://iriscss.com/documentation/elements/button/index.html.md).

```html
<a href="#" role="button" class="primary">Get started</a>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-link-text-decoration` | `underline` |