링크

링크는 다른 서비스/애플리케이션, 한 서비스 내의 다른 화면, 한 화면 내의 다른 섹션 등으로 이동하는 데 사용되는 탐색 요소이다.

사용 지침

페이지 이동·문서 다운로드 등 "이동" 의미가 분명한 동작에만 사용하고, 외부 링크에는 새 창 표시와 시각/스크린 리더용 안내를 함께 제공합니다.

examples/link/LinkDefault.tsx

import { Link } from "@/components/ui/dynamic/link"

export default function LinkDefault() {

examples/link/LinkVariants.tsx

import { ArrowRightIcon } from "lucide-react"

import { Link } from "@/components/ui/dynamic/link"

examples/link/LinkSizes.tsx

import { Link } from "@/components/ui/dynamic/link"

export default function LinkSizes() {

examples/link/LinkUnderlines.tsx

import { Link } from "@/components/ui/dynamic/link"

export default function LinkUnderlines() {

examples/link/LinkWithIcons.tsx

import { ArrowRightIcon, ChevronRightIcon } from "lucide-react"

import { Link } from "@/components/ui/dynamic/link"

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
asChild	boolean	false	—
className	string	—	—
disabled	boolean	false	—
external	boolean	false	—
id	string	—	—
onClick	MouseEventHandler<HTMLAnchorElement>	—	—
preserveColorOnHover	boolean	false	—
size	enum	default	—
style	CSSProperties	—	—
tabIndex	number	—	—
type	enum	—	—