The Link component is a fundamental UI element used for navigating between different parts of a web application or opening external resources. This documentation provides an overview of the Link component and its different variants, states, sizes, and additional features, along with usage examples.
Anatomy
The anatomy of a link component consists of essential elements such as the link text, destination and optional properties for customization, enabling user interaction and engagement within your application.
Properties
The Link component supports different types to provide visual cues and context.
The wide array of properties available for customizing the appearance and behavior of links. Tailor links to match your design requirements, enabling you to create intuitive and visually appealing navigation elements.
Kind
States
Size
Disabled
Default
Default
Small
True
Primary
Hovered
Medium
False
Visited
Large
Status
Primary link type represents the main or most important link on the page.
Default link type represents links that are of lesser importance or are alternative options.
import React from 'react';
import { PlusLink } from '@plusui/react';
const LinkWithKinds = () => (
<>
<PlusLink href="https://google.com"> Go to Google </PlusLink> {/* Default kind */}
<PlusLink href="https://google.com" kind="primary"> Go to Google </PlusLink> {/* Primary kind */}
</>
);
export default LinkWithKinds;
<plus-link href="https://google.com"> Go to Google </plus-link> <!-- Default kind -->
<plus-link href="https://google.com" kind="primary"> Go to Google </plus-link> <!-- Primary kind -->
<template>
<plus-link href="https://google.com"> Go to Google </plus-link> <!-- Default kind -->
<plus-link href="https://google.com" kind="primary"> Go to Google </plus-link> <!-- Primary kind -->
</template>
<plus-link href="https://google.com"> Go to Google </plus-link> <!-- Default kind -->
<plus-link href="https://google.com" kind="primary"> Go to Google </plus-link> <!-- Primary kind -->
States
The Link component supports different states to communicate interactivity and provide visual feedback.
Default link state represents the normal state of the link, with no specific interactions or changes.
Hovered link state occurs when the user's mouse pointer is over the link, providing visual feedback to indicate interactivity.
Visited link state represents a link that the user has already clicked or visited.
import React from 'react';
import { PlusLink } from '@plusui/react';
const LinkWithStates = () => (
<>
<PlusLink href="https://google.com"> Go to Google </PlusLink> {/* Default link */}
<PlusLink href="https://docs.plusui.com/components/link"> Go to Visited Link </PlusLink> {/* Visited link */}
</>
);
export default LinkWithStates;
<plus-link href="https://google.com"> Go to Google </plus-link> <!-- Default link -->
<plus-link href="https://docs.plusui.com/components/link"> Go to Visited Link </plus-link> <!-- Visited link -->
<template>
<plus-link href="https://google.com"> Go to Google </plus-link> <!-- Default link -->
<plus-link href="https://docs.plusui.com/components/link"> Go to Visited Link </plus-link> <!-- Visited link -->
</template>
<plus-link href="https://google.com"> Go to Google </plus-link> <!-- Default link -->
<plus-link href="https://docs.plusui.com/components/link"> Go to Visited Link </plus-link> <!-- Visited link -->
Size
You can set the size of a link using the size prop as small, medium, large.
import React from 'react';
import { PlusLink } from '@plusui/react';
const LinkWithSizes = () => (
<>
<div style={{ fontSize: '1.5em' }}> {/* Parent with a larger font size */}
<PlusLink href="https://google.com"> Inherited Size Link </PlusLink> {/* Inherited size */}
</div>
<PlusLink size="sm" href="https://google.com"> Small Link </PlusLink> {/* Small size */}
<PlusLink size="md" href="https://google.com"> Medium Link </PlusLink> {/* Medium size */}
<PlusLink size="lg" href="https://google.com"> Large Link </PlusLink> {/* Large size */}
</>
);
export default LinkWithSizes;
<div style="font-size: 1.5em"> <!-- Parent with a larger font size -->
<plus-link href="https://google.com"> Inherited Size Link </plus-link> <!-- Inherited size -->
</div>
<plus-link size="sm" href="https://google.com"> Small Link </plus-link> <!-- Small size -->
<plus-link size="md" href="https://google.com"> Medium Link </plus-link> <!-- Medium size -->
<plus-link size="lg" href="https://google.com"> Large Link </plus-link> <!-- Large size -->
<template>
<div style="font-size: 1.5em"> <!-- Parent with a larger font size -->
<plus-link href="https://google.com"> Inherited Size Link </plus-link> <!-- Inherited size -->
</div>
<plus-link size="sm" href="https://google.com"> Small Link </plus-link> <!-- Small size -->
<plus-link size="md" href="https://google.com"> Medium Link </plus-link> <!-- Medium size -->
<plus-link size="lg" href="https://google.com"> Large Link </plus-link> <!-- Large size -->
</template>
<div style="font-size: 1.5em"> <!-- Parent with a larger font size -->
<plus-link href="https://google.com"> Inherited Size Link </plus-link> <!-- Inherited size -->
</div>
<plus-link size="sm" href="https://google.com"> Small Link </plus-link> <!-- Small size -->
<plus-link size="md" href="https://google.com"> Medium Link </plus-link> <!-- Medium size -->
<plus-link size="lg" href="https://google.com"> Large Link </plus-link> <!-- Large size -->
Disabled
Disabled link component ensures that users receive visual and functional cues when a link cannot be interacted with, maintaining a user-friendly and inclusive experience. You can use its variant as true / false.
import React from 'react';
import { PlusLink } from '@plusui/react';
const LinkWithDisabled = () => (
<>
<PlusLink href="https://google.com" kind="primary" disabled>
Go to Google
</PlusLink> {/* Primary kind, disabled */}
<PlusLink href="https://google.com" disabled>
Go to Google
</PlusLink> {/* Default kind, disabled */}
</>
);
export default LinkWithDisabled;
<plus-link href="https://google.com" kind="primary" disabled>
Go to Google
</plus-link> <!-- Primary kind, disabled -->
<plus-link href="https://google.com" disabled>
Go to Google
</plus-link> <!-- Default kind, disabled -->
<template>
<plus-link href="https://google.com" kind="primary" disabled>
Go to Google
</plus-link> <!-- Primary kind, disabled -->
<plus-link href="https://google.com" disabled>
Go to Google
</plus-link> <!-- Default kind, disabled -->
</template>
<plus-link href="https://google.com" kind="primary" disabled>
Go to Google
</plus-link> <!-- Primary kind, disabled -->
<plus-link href="https://google.com" disabled>
Go to Google
</plus-link> <!-- Default kind, disabled -->
Layout & Spacing
Effective layout and spacing of link components play a vital role in crafting user-friendly, visually appealing, and accessible interfaces. Thoughtful consideration of how links are positioned and the space around them enhances both aesthetics and usability, resulting in an overall improved user experience. Properly spaced and arranged links make it easier for users to navigate and interact with your content, promoting an intuitive and engaging interface.
Light & Dark Mode
Implementing light and dark modes for link components enhances user experience, accessibility, and aesthetics. It accommodates various user preferences, improves readability, and keeps your design modern.
Accessibility
Accessibility is a core consideration for our link components, just like it is for buttons. Accessible links benefit users with disabilities and enhance the overall user experience, making our digital product more inclusive, user-friendly, and legally compliant. In this section, we'll provide guidelines for ensuring accessibility in our link components.
Criteria
Description
Status
ARIA Hidden Elements
Ensures aria-hidden elements are not focusable nor contain focusable elements
Passed
ID Attributes
Ensures every id attribute value is unique
Passed
Discernible Text
Ensures links have discernible text
Passed
Color Contrast
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
AA ~ AAA
To learn more about Plus UI's accessibility criteria, please visit Accessibility.
