Taiga UI 5.0 is out!

Link CORE

GitHub

On this page

See also

Button, ButtonGroup
Link component. It has focus highlight and can be customized with an icon

Use textContent binding or wrapping entire content with a span to avoid extra whitespace introduced by browser to a tag when closing tag wraps to a new line — otherwise distance to the icons will be bigger than it should be

Basic

Can be used on native a tag with routerLink or href
Link 
    
      
    

      
      
    

  
    
      <a
    tuiLink
    [routerLink]="routes.Link"
>
    Link
</a>

Icons

Can also be used on buttons as well as with icons on either side. 

    
      
    

      
      
    

  
    
      <button
    iconEnd="@tui.settings"
    tuiLink
    type="button"
    [textContent]="'Link with icon right'"
></button>
<p>
    <button
        iconStart="@tui.settings"
        tuiLink
        type="button"
        [textContent]="'Link with icon left'"
    ></button>
</p>

Appearances

Different color and underline styles.
Links by default have appearance which you can override with or

If you use no appearance, links would in tandem with an underline decoration to make them visible.

It would also work well together with dark theme and other text colors

If you want, you can dashed underline for any appearance using text-decoration-line: underline or switch link underline to dashed style by text-decoration-style: dashed
    
      
    

      
      
    

  
    
      Links by default have
<button
    iconStart="@tui.edit"
    tuiLink
    type="button"
>
    <span>action</span>
</button>
appearance which you can override with
<button
    appearance="action-grayscale"
    tuiLink
    type="button"
>
    action-grayscale
</button>
or
<button
    appearance="action-destructive"
    iconEnd="@tui.trash"
    tuiLink
    type="button"
    [textContent]="'action-destructive'"
></button>
<p>
    If you use no appearance, links would
    <button
        appearance=""
        iconEnd="@tui.external-link"
        tuiLink
        type="button"
    >
        <span>inherit text color</span>
    </button>
    in tandem with an underline decoration to make them visible.
</p>
<p tuiTheme="dark">
    It would also work well together with
    <a
        appearance=""
        iconStart="@tui.paintbrush"
        tuiLink
    >
        <span>dark theme</span>
    </a>
    and other text colors
</p>

If you want, you can
<button
    iconStart="@tui.heart"
    tuiLink
    type="button"
    [style.text-decoration-line]="'underline'"
>
    <span>enable</span>
</button>
dashed underline for any appearance using
<code>text-decoration-line: underline</code>
or switch
<button
    appearance=""
    tuiLink
    type="button"
    [style.text-decoration-style]="'dashed'"
>
    inherited
</button>
link underline to dashed style by
<code>text-decoration-style: dashed</code>

    

      
      
    

  
    
      [tuiTheme='dark'] {
    background: var(--tui-background-base);
    color: var(--tui-text-secondary);
    padding: 1rem;
    margin: 1rem -1rem;
}

Long text

Multi line wrapping also works with icons.
Link can be written inline in text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text block and if no extra whitespace is introduced, the icon would wrap together with the last word inside the tag 
    
      
    

      
      
    

  
    
      Link can be written inline in text.
<!-- prettier-ignore -->
<a
    href="https://www.lipsum.com/"
    iconEnd="@tui.external-link"
    tuiLink
>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the standard dummy text block</a>
and if no extra whitespace is introduced, the icon would wrap together with the last word inside the tag
GitHub StackBlitz