Link

Links are a fundamental element that allows users to redirect to a different page on the interface or to an external resource directly using a sentence, paragraph, or label with the <a> (Anchor) tag.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Principles

Use when

  1. providing navigation options for users to move between different sections or pages of an application.
  2. to reference external content or websites, providing users with access to additional resources.

Don't use when

  1. to create interactive elements within a page. Instead, use appropriate interactive components like buttons or related form elements.

Properties

Style

Primary

Primary is for when blue (primary) color needed to use while highlighting the link.

Secondary

Secondary can be used when you don't want to highlight the link in a contextual order.

Dark

When using a link on a dark background, it should be a lighter color.

States

Enabled

The enabled type is used to indicate as it is default.

Hover

While hovering, the text color will change depending on its current color and adding to link text an underline.

Active

It typically indicates that the link is currently being interacted with. The link may change appearance temporarily to provide feedback, such as darkening the color.

Focus

When a user navigates to the link using the keyboard, itenters the focus state.

Disabled

Links can be disabled to indicate that they are not currently clickable.

Properties

Icon (boolean)

Link text can include an icon to emphasize the context. For example, redirecting to an external source can be represented with a north-east-arrow symbol.