- style
Text Links
- 1 Description
- 2 Usage & Behavior
- 2.1 General guidelines
- 2.1.1 Content
- 2.2 States
- 2.3 Interaction
- 2.4 Best practices
- 2.1 General guidelines
- 3 Accessibility compliance
- 3.1 Focus management
- 4 Design
- 5 Code
Description
Links are used as a navigational element which enable users to reach other pages.
Usage & Behavior
General guidelines
Content
Links are composed of text only. If the link is part of a sentence or section that has specific styling, it should be presented with the same styling (e.g. font size).
States
State | Image |
|---|---|
Regular |
|
Hover |
|
Active |
|
Disabled |
|
Focused, Regular |
|
Focused, Hover |
|
Focused, Active |
|
Focused, Disabled |
|
Interaction
On hover, the mouse cursor changes to a hand:
Clicking anywhere on the link’s text will either:navigate to a specified location.
The new location will be opened within the same browser tab, unless otherwise specified.
Best practices
Use:
to navigate to a new screen, tab, or an element on the same page.
to link to emails or phone numbers.
Don’t use:
to change or manipulate data (e.g. View more, Show all) → use Buttons.
General
Use a meaningful, descriptive label for the link, and match the destination name. Don’t use Click here, Here, or a URL.
Avoid text wrapping. Use caution with links that are several words long.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Description |
|---|---|
Tab | Navigates to the next component. |
Shift + Tab | Navigates to the previous component. |
Space | N/A |
Enter | Navigates according to the focused link. |
Esc | N/A |
Arrows | N/A |
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code