Link
Links are interactive text elements used for navigation within the text paragraphs.

Since links are usually used for the navigation inside the text, Button is a better alternative for standalone actions.

Usage

Link can be rendered by passing children to it in the middle of the text. It respects the line breaks, so its content can start on one line and end on the next one without breaking the text flow.

Link supports both, href and onClick properties, which cause Link to be rendered as an <a> or a <button> tag respectively.

Note: If you use dynamic routing with onClick, make sure to pass href as well to preserve the regular <a> tag functionality. For instance, that will keep Open Link in a New Tab function for your product users.

We recommend using underlined Links to visually differentiate it from the rest of the text and that's the default variant we provide. However, it's also possible to remove the underline for the use cases where keeping it produces too much visual noise.

Colors

Besides the default primary color, Link can also be rendered using inherit color. That will inherit the Link color from its parent elements.

States

Links that are used as buttons can be disabled for the user interaction with disabled flag.

Accessibility

Link click event triggers on both, Space and Enter key press.

Properties

Base properties:

NameTypeDefaultRequiredComment
childrenReactNode-falseReplacement for text
colorprimary, inheritprimaryfalse
variantplain, underlinedunderlinedfalse
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

Link properties, when used with href property:

NameTypeDefaultRequiredComment
hrefstring-false
onClick(event) => {}-false

Button properties, when used without href property:

NameTypeDefaultRequiredComment
typebutton, submit, resetbuttonfalseHTML type attribute
disabledboolean-false
onClick(event) => {}-false