LinkHealthy

Usage

A link is a navigation element most commonly used to navigate from one page to another. Links can be used within a paragraph, within a group of related links, or as a standalone element.

Types

There are four primary link types:

Monochrome

Use monochrome when a link needs to be recognized in a busy area or distinguished from other elements in a group.

Note: A monochrome link can be any text color.

Primary

Use a Primary link when a link needs to standout in a sentence, or as a primary CTA (when using a button doesn't apply).

Secondary

Use a secondary link when several links appear together, or as part of a group of other interactive elements (within a product card, for example).

Tertiary

Use a tertiary link when a link should be lower priority than other interactive elements on the page.

Base / Static

houzz-ui also supports semi-custom variants: base and static. A base link will maintain it's color on hover, but add an underline on hover. static should not be used in most cases.

Sizes

A link can be applied to any text size, but most commonly, links should be used in the following three sizes (no props):

• Small: 12px (Regular/Semibold)
• Medium: 14px (Regular/Semibold)
• Large: 16px (Regular/Semibold)

Props

Accessibility

• If no valid href is provided, <Link/> will render as a button. An example of this use case would be an inline trigger for tooltip or modal.