Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Link

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

A clickable element that enables the users to navigate. Use a link when you want users to:

  • Navigate to a different page within the application
  • Navigate to an entirely different site
  • Jump to an element on the same page
  • Link to emails or phone numbers
import { Link } from '@kubit-ui-web/react-components'
1
<Link variant="PRIMARY" url="/#">Link</Link>

Variants

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified, or new ones can be added to align with the specific requirements of each project.

We have set predefined styles for quick use. Access them through the variant prop:

123
<Link variant="PRIMARY" url="/#">PRIMARY LINK</Link>
<Link variant="SECONDARY" url="/#">SECONDARY LINK</Link>
<Link variant="SECONDARY_ALT" url="/#">SECONDARY ALT LINK</Link>

Action

The action prop can be used to apply custom styles to the component attending to its variant. The possible values are: NAVIGATION and INLINE. Default value is NAVIGATION.

12
<Link variant="PRIMARY" url="/#" action="NAVIGATION">NAVIGATION</Link>
<Link variant="PRIMARY" url="/#" action="INLINE">INLINE</Link>

Disabled

Use the disabled prop to inform users that no interaction is allowed in this moment.

1
<Link variant="PRIMARY" url="/#" disabled={true}>DISABLED</Link>

Icon

You can enhance the component by adding an icon using the icon prop. Furthermore, you have the option to adjust its position using the iconPosition prop.

1
<Link variant="PRIMARY" url="/#" icon={{icon: "ICON_PLACEHOLDER"}}>Link</Link>
ButtonAccessibility
LinkDesign Specs