title: Link
name: link
notes: >
  A link is a **navigation** component. Links are recognized as **doors between pages**. That means **links description** should be **self-explanatory**. People need to understand where they will land, if they click on a link. Avoid having long links. The **3-words-maximum** rule is good.


  Links may - in some situations - activate interactions without loading a new the page. Like loading extra elements from a results list or sort items in a table.

  ## Links styles

  Default style for links uses a **red underline**, in [supported
  browsers](https://caniuse.com/#feat=text-decoration). In other browsers, the underline
  uses text color.

  The `link-collapse` class sets the link to have a red triangle and special
  styles.
variants:
  - name: bg-variants
    title: Background variants
    notes:
  - name: icon
    title: Icon
    notes: |
      You can set up a link with a custom icon. The icon will automatically be at the other end of the element (with flex).
  - name: login
    title: Login link
    notes:
  - name: button
    title: Button link
    notes: |
      Use the classes `btn`, `btn-primary` or `btn-secondary` to create a link with the look of a button.

      ⚠️ Button links should be used to target a page or section of a page – like a regular link. To trigger an action, use an [HTML button](#/atoms/button).