Code

Props

Props	Data Type	Required
children	string	✅
className	string	❌
href	string	✅
targetBlank	string	❌
underline	boolean	❌
disabled	boolean	❌
icon	string (Check Telicon website to get the name of the icon).	❌
routerLink	boolean	❌
'data-tip'	-	❌
'data-for'	-	❌

routerLink

At passing this prop the inserted component is no longer going to be an <a> tag, instead it will be changed for a span tag. This way, developers are going to be able to preserve the Link component styles and inserting them into a Link Component of the react-router-dom library without any conflict.

At using the Link component from react-router-dom library, it is not recommended to insert an <a> tag inside of it.

This decision was made in order to avoid using the react-router-dom library as a peer-dependency in the sds-react-components package. Recently, while this documentation was being written, there were some updates in the react-router-dom library that made it incompatible with older versions. To avoid that conflic or forcing developers to update or downgrade libraries in their projects, it was better to leave that option open to the developers, so they can use the version that works better for their projects.

'data-tip' and 'data-for' props

These props are only for internal usage, and they are automatically generated at using Tooltip Component. Said that, developers don't have to worry about this props. They exist just to make this Link component compatible with Tooltip Component.

Components Dependency

For this component elaboration there were used the following internal components:

• Telicon

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

General Components / Link - Basic Link ⋅ Storybooksipster-react-component-storybook.netlify.app