Design
Web component
Is documented
Principles
Use when
- providing navigation options for users to move between different sections or pages of an application.
- to reference external content or websites, providing users with access to additional resources.
Don't use when
- to create interactive elements within a page. Instead, use appropriate interactive components like buttons or related form elements.
Properties
Links can inherit text styles, such as label-01, label-02, body-long-01, body-long-02, and body-short-01, body-short-02, using the <a> tag.
Link can also be used as inline within text.
Variants
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. |
We deprecated the disabled state from this component because it does not make sense to keep the <a> tag disabled.
With 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.
The common icon usage for a link is to redirect users to an external source. For this purpose, we use only the north-east-arrow icon in the component property. If you need a different icon on this component, please let us know.
Target
Links can be used to navigate to specific sections within the same page or to other pages/locations.
Behavior
Inline text usage
Links can be inserted in body text and paragraphs. However, we do not recommend using a link with an icon because the line height of the text and the icon do not match.