Link

1import { Link } from '@/components/ui/link'
2
3export function LinkDemo() {
4    return (
5        <div className="flex flex-col gap-2">
6            <Link href="https://google.com" target="_self">
7                Open in same tab
8            </Link>
9            <Link
10                href="https://google.com"
11                target="_blank"
12                rel="noopener noreferrer"
13                variant="primary"
14            >
15                Open in new tab
16            </Link>
17            <Link
18                href="https://google.com"
19                underline="none"
20                target="_blank"
21                variant="primary"
22            >
23                No underline
24            </Link>
25            <Link href="https://google.com" target="_blank" variant="primary">
26                Underline on hover
27            </Link>
28            <Link href="https://google.com" underline="always" target="_blank">
29                Always underlined
30            </Link>
31        </div>
32    )
33}
34

1import { Link } from '@/components/ui/link'
2
3export function LinkVariantSize() {
4    return (
5        <div className="flex flex-col gap-2">
6            <Link href="https://google.com" variant="default">
7                Default Size
8            </Link>
9
10            <Link href="https://google.com" variant="primary" size="sm">
11                Small Size
12            </Link>
13
14            <Link href="https://google.com" size="md" variant="secondary">
15                Medium Size
16            </Link>
17
18            <Link href="https://google.com" size="lg" variant="destructive">
19                Large Size
20            </Link>
21
22            <Link
23                href="https://google.com"
24                target="_blank"
25                rel="noopener noreferrer"
26                size="sm"
27                variant="button"
28            >
29                Button variant
30            </Link>
31        </div>
32    )
33}
34

1import { ArrowRight } from 'lucide-react'
2
3import { Link } from '@/components/ui/link'
4
5export function LinkIconText() {
6    return (
7        <div className="space-y-3">
8            <div>
9                <Link
10                    href="https://google.com"
11                    className="inline-flex items-center gap-1"
12                    target="_blank"
13                >
14                    Read the article
15                    <ArrowRight className="h-4 w-4" />
16                </Link>
17            </div>
18
19            <div>
20                <p className="text-base">
21                    Get started to{' '}
22                    <Link
23                        href="https://google.com"
24                        underline="always"
25                        variant="primary"
26                    >
27                        search
28                    </Link>{' '}
29                    your preferences.
30                </p>
31            </div>
32        </div>
33    )
34}
35