Links are used as navigational elements. They may appear isolated, inside a sentence or paragraph or following the content.


disabled: booleanfalseIf true, the link is disabled.
inheritColor: booleanfalseIf true, the color is inherited from parent.
icon: node | stringElement or path used as the icon that will be placed next to the link text.
iconPosition: 'before' | 'after''before'Indicates the position of the icon in the component.
href: stringPage to be opened when the user clicks on the link.
newWindow: booleanfalseIf true, the page is opened in a new browser tab.
onClick: functionIf defined, the link will be displayed as a button. This function will be called when the user clicks the link.
children: stringContent of the link.
margin: string | objectSize of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
tabIndex: number0Value of the tabindex.


Basic usage

There are many React based routers, unfortunately all with different APIs.

So we decided to make our link component just an styled HTML anchor element which allows it to be used in any React based router. For each API is different, so here are some examples for React Router and NextJS Link. Some of these examples are just representations of how they should be implemented but might not work correctly in this scenario.

This is an example of React Router using the prop component. Note that this prop is not available in v6.

In React Router v6 the prop component is no longer available so it is necessary to use hooks provided by React Router v6.

This is an example of NextJS .