Link
Customize your anchor elements with Link to match your theme's style.
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.
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;
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;
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;
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;
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.
ARIA Hidden Elements
Ensures aria-hidden elements are not focusable nor contain focusable elements
ID Attributes
Ensures every id attribute value is unique
Discernible Text
Ensures links have discernible text
Color Contrast
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
To learn more about Plus UI's accessibility criteria, please visit Accessibility.
Design System
API
Props
kind
Kind
String
primary, default
default
href
Link
String
target
Target
String
_blank, _self, _parent, _top
_self
Slots
default
Link content
Last updated
Was this helpful?