Chakra Docs


⦾ The Link component in Chakra UI provides an accessible way to handle navigation.

Here are a few ways in which the Chakra UI Link component can make using links in UI design easier:

  • Consistent styling: The Chakra UI Link component provides a set of default styles for links, ensuring a consistent and visually pleasing appearance throughout your application. You can easily apply these styles to your links without the need for writing custom CSS.
  • Customizable styles: While the component offers default styles, it also allows you to customize the link's appearance based on your specific design requirements. You can modify the color, hover effects, typography, and other visual aspects of the link using Chakra UI's theming and styling system.
  • Accessibility features: Chakra UI Link component is built with accessibility in mind. It includes proper ARIA attributes, keyboard navigation support, and focus management, ensuring that links are usable and accessible for all users, including those who rely on assistive technologies.
  • Easy integration: The Chakra UI Link component seamlessly integrates with other components and utilities, making it straightforward to create interactive and responsive UIs. You can combine it with other components like buttons, icons, or text to enhance the functionality and user experience of your links.
  • Routing support: Link also provides built-in support for routing in React applications. It works well with popular routing libraries like React Router, allowing you to navigate between different pages or sections of your application without writing complex navigation logic.

The Link components can be imported as follows:


Basic Usage

⦾ To create a link with the Link component, you simply use the component with the desired link text as children and pass the URL as the href prop. The following will render a basic link that points to the OpenAI website.

External Links

⦾ Chakra UI also allows for external links. For instance, if you want to link to an external website, you can use the href prop to specify the URL and the isExternal prop to open the link in a new tab. In this example, the ExternalLinkIcon indicates that the link will open in a new tab.

Link Inline with Text

⦾ Chakra UI also allows for links to be inserted inline within a text body. For example, if you want to highlight a certain part of your text as a link, you can simply nest the Link component within the Text component.

Have you tried the OpenAI platform yet?

Usage with Routing Libraries

⦾ The Link component can also be integrated with routing libraries like Reach Router or React Router. All you need to do is pass the as prop to change the underlying HTML element. The following link will take you to the main page of this site, for example.

Usage with Next.js

⦾ The Chakra UI Docs go into detail on how to use the Link component within the context of Next.js. You can read more about that here.

Did you know?

Creative Idea No. 1

Applying custom CSS to Links: You might not be aware that Chakra UI gives you the flexibility to apply custom CSS to the Link component. For instance, you can create an animated underline effect for your links when a user hovers over them. In this example, a blue underline expands beneath the text as a user hovers over the link, offering an animated, intuitive visual cue.

Check out our

Terms and Conditions


Creative Idea No. 2

Creating a Download Link: You can create a download link using the Link component in Chakra UI. This could be a handy way to provide users with downloadable content such as a PDF or a ZIP file. By simply adding the download prop to the Link component, the linked file will be downloaded when the user clicks on the link. (The following link will download information about the standard poodle dog breed...because they are the best dogs on the planet. At least we think so.) By simply adding the download prop to the Link component, the linked file will be downloaded when the user clicks on the link.


Creative Idea No. 3

Using Link as a Button: In some cases, you might want a link that looks like a button. This is easily achievable with Chakra UI. By passing the Button component in the as prop of Link, the link is rendered as a button. You can then use any of the Button props on the Link component, such as colorScheme. This can be useful when you want the aesthetics and interaction of a button, but the functionality of a link. Keep in mind: due to the way events are handled when you use the as prop in Chakra UI to transform the Link component into a Button component. When you click on the button, the event handler associated with the Button component gets triggered first and prevents the default link behavior. To get around this, you must handle the click event yourself.


copyright © 2023 IHeartComponents |


Special thanks to Stefan Bohacek / Generative Placeholders.