Links are interactive text elements used for navigation within the text paragraphs.
Supports multiline display within the text
Dynamically adjusts to the parent element typography and color styles
Automatically resolves to correct HTML tag
Similar components:
ButtonMenu ItemActionable


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. 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. If you use Link for client-side routing make sure to pass href to it to keep the native link functionality working. For example, that will keep Open link in a new tab functionality working.

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.

Links are primarily used as pure text elements and can be used in multiline text. For the cases when you use them as standalone elements, you can also add an icon to it. In these cases if the line breaks in the middle of the link content, the whole link will move to the next line.


Link supports primary and critical colors, as well as inherit color that will use the color value used by the parent component.


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, critical, 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