Code

The Link component usage and API reference.

API

This component extends the native anchor tag props. This means this component can receive the native html anchor tag attributes, for example, the target attribute (which is why it's not included in the table). See for reference: anchor tag props.

Props
Data Type
Required

children

string

className

string

href

string

isUnderlined

boolean

isDisabled

boolean

iconBefore

iconAfter

The href prop is not technically required in the Link, but it is strongly recommended. The href prop specifies the URL of the page that the link goes to, and it is essential for creating functional links.

children

In this case, the "children" of the Link component is just a plain text string, which means it's not any kind of HTML or JSX code. It's just a simple message that we want to show on the Badge.

isUnderlined

The isUnderlined prop is a property used in the Link component to add or remove an underline from text. When set to true, the text is underlined, and when set to false, it's not. It's often used to indicate links or add emphasis to text within a component.

isDisabled

The isDisabled prop is a property used in the Link component to indicate that the component should be disabled and not clickable. When set to true, it visually indicates that the component is disabled and cannot be interacted with.

IconBefore and iconAfter

Collection of available icons to implement on the Link component. This collection is based on the Telicon icon collection that can be found here. This will render the passed icon after/before or both the children.

Examples

Live Code

Last updated