Link
A link lets users navigate to other pages or resources within a website or app, helping them find related content quickly and easily.
Using the Link component is optional but recommended for better
accessibility and consistent navigation behavior. You can use the navigation
component provided by your routing framework instead.
Example
Features
Links can be created in HTML with the <a> element with an href attribute. However, if the link does not have an href, and is handled client side with JavaScript instead, it will not be exposed to assistive technology properly. Link helps achieve accessible links with either native HTML elements or custom element types.
- Flexible – Support for HTML navigation links, JavaScript handled links, and client side routing. Disabled links are also supported.
- Accessible – Implemented as a custom ARIA link when handled via JavaScript, and otherwise as a native HTML link.
- Styleable – Hover, press, and keyboard focus states are provided for easy styling. These states only apply when interacting with an appropriate input device, unlike CSS pseudo classes.
Installation
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx @libravelui@latest add linkAnatomy
import { Link } from "@/components/ui/core/link";<Link href="#" tone="default">Default Link</Link>
<Link href="#" tone="primary">Primary Link</Link>
<Link href="#" tone="secondary">Secondary Link</Link>
<Link href="#" tone="underline">Underline Link</Link>Props
Loading types…