Link

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


Usage

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.

Colors

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

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, critical, inheritprimaryfalse
variantplain, underlinedunderlinedfalse
iconReact.Component-false
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