Usage

Anatomy

Links are used primarily used within or directly following a sentence. The underline is shown by default to helps users identify links and support our accessibility requirements.

iconLeft (optional): To support the type of link available.

Text: The label of a link.

iconRight (optional): Typically used to denote an external link.

Types

Primary

The primary link uses our brand blue to clearly signify an action when sat within copy and alongside it.

Secondary

The secondary variant is the same gray color as the paragraph text. Its subdued appearance is optimal for when the primary variant is too overwhelming, such as in blocks of text with several references linked throughout.

Inverse

Our inverse variant is for when content is on darker backgrounds and our Primary and Secondary styles would not be visible enough to users.

Link can be used in multiple ways, with supporting icons when appropriate to help users understand the action it will present.

	Link with icon The icon and iconRight props can be used to append and prepend icons to a link.

	External link Used to navigate customers to a page in a new tab window or outside of the Productboard itself. The icon is always after the text link.

	Inline Links are for usage in body copy and are not appropriate in titles. Buttons are a great substitute as actions that sit alongside larger text sizes.

	Standalone Alternatively, standalone links can be placed underneath sentences, either alongside eachother or in a vertical stack. Our default 8px padding should be used here.

Inherit

By default, Link inherits the size from its parent, matching its attributes. When a standalone link is used, aim to match the text size and style of the content they are accompanying.

Best practice

Be conscious of your choice of Link vs Button - Link for supporting body copy and Button for primary actions such as 'Share' or 'Save'.

Standalone links should be short and concise, much like labels within Buttons.

We recommend using only one icon with a Link at a time, but we do support the usage of both left and right icons.

Do's and Don'ts

Do	Don't
✅ Match Link to the text size and font weight of the content they are accompanying for consistency and visual balance.	🚫 Underline Text that isn’t a Link, as underline has a strong link affordance.
✅ Provide a meaningful descriptive label to the link that clearly indicates the link’s destination.	🚫 Add Links in headings or titles as this is not an acceptable use. Consider using a Button for an additional action.
	🚫 Use other icons to represent an external Link. Instead, use the correct external icon.

Also see

Button

Text