Links

New

Structure

            
<a class="link" arial-label="link text" href="#">link text</a>
            
        

Guidelines

The link class, by itself, inherits the rules set for a common anchor tag, but for better working, it is necessary to put it in order to accept the class modifiers.

 

Modifiers


Size


  • Small - link--s
  • Medium (default) - link--m
  • Large - link--l

Pre-defined icons


  • Chevron Right - link--i-chevron
  • External - link--i-external

Theme


  • Default - no modifier
  • Secondary - link--secondary

Dark Theme


  • Default - link--dt
  • Secondary - link--dt-secondary

State


  • Disabled - link--disabled

Icon grouping


  • Material Symbols - link--symbols

Examples

 Anchor tagButton tagAnchor tagButton tag
DefaultLinkLink
Small sizeLinkLink
Large sizeLinkLink
Chevron iconLinkLink
External iconLinkLink
Primary disabledLinkLink
SecondaryLinkLink
Secondary DisabledLinkLink
Internal symbols Link Link