Components
Loading preview...
A link allows a user to navigate to another page or resource within a web page or application. 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.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/linkimport { Link } from "@/components/ui/link"
function LinkVariants() {
return (
<div className="flex flex-col gap-4">
<div className="flex flex-wrap justify-center gap-4">
<Link href="/docs/components/link">Link</Link>
<Link variant="destructive" href="/docs/components/link">
Destructive
</Link>
<Link variant="ghost" href="/docs/components/link">
Ghost
</Link>
<Link variant="link" href="/docs/components/link">
Link
</Link>
<Link variant="outline" href="/docs/components/link">
Outline
</Link>
<Link variant="secondary" href="/docs/components/link">
Secondary
</Link>
</div>
Disabled
<div className="flex flex-wrap justify-center gap-4">
<Link isDisabled href="/docs/components/link">
Link
</Link>
<Link isDisabled variant="destructive" href="/docs/components/link">
Destructive
</Link>
<Link isDisabled variant="ghost" href="/docs/components/link">
Ghost
</Link>
<Link isDisabled variant="link" href="/docs/components/link">
Link
</Link>
<Link isDisabled variant="outline" href="/docs/components/link">
Outline
</Link>
<Link isDisabled variant="secondary" href="/docs/components/link">
Secondary
</Link>
</div>
</div>
)
}
export { LinkVariants }