Links

Links are used to navigate to a destination.

Usage
Code

Links are used to navigate to a destination which can be on the same page or a different one.

Structure

A link consist of just a text. It does not contain any padding.

Sizes

Links come in 2 sizes - regular and tiny.

Appearances

Links come in 2 appearances - primary and subtle.

States

Links come in 5 states - default, hover, active, focus and disabled.

States of a link

Properties

PropertyValue(s)Default value
Appearance
  • Default
  • Subtle
  • Default
    Size
  • Regular
  • Tiny
  • Regular

    Usage

    It is the default link component and comes in the primary color. It is used to draw attention and hence it is not recommended to have many links on a single page.

    ‘Forgot password?’ as primary link, being used for navigating to a new screen

    This is the subtle variant of link and hence uses a lighter color. It is primarily used in the breadcrumb component. Use it sparingly such as times when the default link can be too overwhelming to use (too much primary color on the screen).

    Breadcrumbs as subtle link being used for navigating to previous screens