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.


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.


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


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


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


Base properties:

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:

onClick(event) => {}-false

Button properties, when used without href property:

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