Link
Interactive component to help users navigate to new pages.
The <Link> component is an interactive element that redirects users to different pages or sections within a website or application. It can also be used to enable file downloads, open the user's default email client to compose a new message, or show a specified address in a map application.
Anatomy
A link consists of text that indicates what the link will direct the user to. To distinguish a link from regular text, it is usually underlined.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Property | Type | Description |
|---|---|---|
variant | default | secondary | The available variants of this component. |
size | default | small | The available sizes of this component. |
The Link component supports variants to match different navigation contexts.
| Variant | Description | When to use |
|---|---|---|
default | Colored link text matching the brand accent. This is the default variant. | Standard inline navigation links within text content. |
secondary | Bold, underlined link in the foreground color that removes underline on hover. | Links that should be prominent but don't use the brand color, often in headers or navigation areas. |
Usage
Links serve as essential navigational tools in web design, enabling users to move seamlessly within an application, visit different websites or jump to specific elements on the same page. They can even be used to directly open apps to compose an email or make a call.
Using descriptive and meaningful labels for links is crucial to clearly indicate their destination. Generic phrases can leave users confused and helpless. Overusing links, especially inline, can overwhelm users and obscure their next steps. Use them sparingly to avoid clutter.
Provide a meaningful descriptive label to the link that clearly indicates the link's destination.
Don't use generic phrases like "click here" or "go to" on links.
Opening in new windows or tabs
Avoid opening links in new windows or tabs as it can be disorienting for users. It's acceptable to do so only when necessary, such as when the link leads to an external site, or when there's a risk of users losing their current place or task.
To support accessibility, ensure that such links include a warning for screen readers to alert users of the new window or tab. For more details on this practice, see the W3C guidelines.
Buttons or links
For actions that will change data, alter a state, or trigger a high-emphasis action, use a button instead of a link.
You can find more details on this on the button component page.
Phone numbers and emails
When using links with phone numbers (tel:) or emails (mailto:), it's important to ensure they serve a clear navigational purpose while triggering specific actions. For example, a phone number link should automatically initiate a call when clicked, and an email link should open the user's email client.
Make sure that the link text and any accompanying icons clearly indicate the action that will be triggered and the intended destination.
Clearly indicate the action that will be triggered.
Don't use vague labels without specifying how to reach out.
Download links
Using the download attribute on an anchor element causes the browser to treat the linked URL as a download and allows setting a filename for the download.
Always indicate if a link triggers a download, and make the linked text clear about what will be downloaded, including the file type and size.
import { Center, Link } from '@marigold/components';export default () => ( <Center> <Link href="/link/tickets-yakari-gustav-gans.pdf" download> Download your print@home tickets <small>(PDF, 15kb)</small> </Link> </Center>);
Clearly indicate what will be downloaded, including the file type and size.
Don't use download links without indicating they trigger a download.
Integrating with a router
The <Link> component can be seamlessly integrated with your app's router (like Tanstack Router, Next.js or React Router) to retain all the accessibility features and functionality of the <Link> component.
For more details, you can read about this integration on the "RouterProvider" page.
Props
Prop
Type