Link Content

텍스트와 화살표 아이콘으로 다른 화면이나 콘텐츠로 이동하는 링크를 표현해요.

Deprecated

SEED Design 3.0에서 Link Content는 deprecated 됐어요. 새 화면에서는 Action Button 의 variant="ghost" 를 사용하는 것을 권장해요. 기존 화면과의 호환을 위해 스펙은 그대로 제공해요.

전체 보기

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/link-content.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/link-content.json

radix-ui, class-variance-authority 를 설치하고 아래 코드를 components/ui/link-content.tsx 에 복사해요.

components/ui/link-content.tsx

/** * @title Link Content * @description 텍스트와 화살표 아이콘으로 다른 화면이나 콘텐츠로 이동하는 링크를 표현해요. */import * as React from 'react';import { Slot } from 'radix-ui';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';// SEED Rootage spec: link-content.yaml (SEED 3.0 에서 deprecated — Action Button ghost 권장)const linkContentVariants = cva(  [    'inline-flex cursor-pointer select-none items-center gap-x0_5 text-fg-neutral antialiased no-underline',    'rounded-r0_5 transition-[color,opacity] duration-(--rb-duration-color-transition) ease-easing',    'outline-2 outline-offset-2 outline-transparent focus-visible:outline-stroke-focus-ring',    'active:opacity-60',    'aria-disabled:pointer-events-none aria-disabled:text-fg-disabled',    '[&_svg]:pointer-events-none [&_svg]:shrink-0',  ],  {    variants: {      size: {        t4: 'text-t4 [&_[data-slot=link-content-suffix-icon]]:size-x3',        t5: 'text-t5 [&_[data-slot=link-content-suffix-icon]]:size-x3_5',        t6: 'text-t6 [&_[data-slot=link-content-suffix-icon]]:size-x4',      },      weight: {        regular: 'font-regular',        bold: 'font-bold',      },    },    defaultVariants: {      size: 't4',      weight: 'regular',    },  },);export interface LinkContentProps extends React.ComponentProps<'a'>, VariantProps<typeof linkContentVariants> {  /** 자식 요소(라우터 Link, button 등)에 스타일을 입혀요. */  asChild?: boolean;  /** 라벨 뒤에 붙는 아이콘이에요. 보통 오른쪽 화살표를 써요. */  suffixIcon?: React.ReactNode;  /** 비활성 상태로 표시하고 이동을 막아요. */  disabled?: boolean;}function LinkContent({  className,  size,  weight,  asChild = false,  suffixIcon,  disabled = false,  children,  ...props}: LinkContentProps) {  const Comp = asChild ? Slot.Root : 'a';  return (    <Comp      data-slot="link-content"      aria-disabled={disabled || undefined}      tabIndex={disabled ? -1 : undefined}      className={cn(linkContentVariants({ size, weight }), className)}      {...props}    >      {asChild ? (        children      ) : (        <>          <span data-slot="link-content-label">{children}</span>          {suffixIcon && (            <Slot.Root data-slot="link-content-suffix-icon" aria-hidden>              {suffixIcon}            </Slot.Root>          )}        </>      )}    </Comp>  );}export { LinkContent, linkContentVariants };

Anatomy

Link Content는 Label과 선택적인 Suffix Icon으로 구성돼요. 두 요소 사이 간격은 x0_5 로 고정이고, 색은 fg-neutral 을 사용해요.

슬롯	설명
Root	링크(`a`) 요소예요. 라벨과 아이콘을 가로로 배치해요.
Label	링크 텍스트예요.
Suffix Icon	라벨 뒤에 붙는 아이콘이에요. 크기는 Size에 따라 정해져요.

Properties

Size

텍스트 스케일 T4, T5, T6 세 가지 사이즈를 제공해요. Suffix Icon은 각각 12px(x3), 14px(x3_5), 16px(x4) 크기로 맞춰져요.

T4 더보기 T5 더보기 T6 더보기

Weight

Regular와 Bold 두 가지 굵기를 제공해요. 주변 텍스트보다 링크를 더 강조해야 할 때 Bold를 사용해요.

Regular Bold

Suffix Icon

라벨 뒤에 아이콘을 붙여 이동한다는 의미를 더할 수 있어요. 화면 안에서 이동할 때는 오른쪽 화살표, 외부 페이지로 나갈 때는 바깥 방향 화살표를 사용해요.

아이콘 없음 판매 내역 보기 고객센터 열기

State

Enabled, Pressed, Disabled 상태를 가져요. 누르면 투명도가 낮아지고, Disabled 상태에서는 fg-disabled 색으로 바뀌며 이동하지 않아요.

Enabled Disabled

Guidelines

Usage

섹션 제목 옆의 "더보기" 처럼 콘텐츠 목록 전체로 이동하는 진입점에 사용해요.

오늘의 추천 상품

전체 보기 ›

Do· 짧고 명확한 라벨

이동할 곳을 짧은 동사형 라벨로 알려줘요.

여기를 누르면 전체 목록을 볼 수 있어요 ›

Don't· 문장형 라벨

긴 문장은 링크라는 사실을 알아보기 어렵게 만들어요.

Action Button으로 옮기기

새로 만드는 화면에서는 Action Button의 Ghost variant를 사용해요. 눌림 피드백과 터치 영역이 더 명확해요.

// 이전
<LinkContent href="/items" suffixIcon={<ChevronRightIcon />}>전체 보기</LinkContent>

// 이후
<ActionButton asChild variant="ghost" size="small">
  <a href="/items">전체 보기 <ChevronRightIcon /></a>
</ActionButton>

/** * @title Link Content * @description 텍스트와 화살표 아이콘으로 다른 화면이나 콘텐츠로 이동하는 링크를 표현해요. */ import * as React from 'react'; import { Slot } from 'radix-ui'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; // SEED Rootage spec: link-content.yaml (SEED 3.0 에서 deprecated — Action Button ghost 권장) const linkContentVariants = cva( [ 'inline-flex cursor-pointer select-none items-center gap-x0_5 text-fg-neutral antialiased no-underline', 'rounded-r0_5 transition-[color,opacity] duration-(--rb-duration-color-transition) ease-easing', 'outline-2 outline-offset-2 outline-transparent focus-visible:outline-stroke-focus-ring', 'active:opacity-60', 'aria-disabled:pointer-events-none aria-disabled:text-fg-disabled', '[&_svg]:pointer-events-none [&_svg]:shrink-0', ], { variants: { size: { t4: 'text-t4 [&_[data-slot=link-content-suffix-icon]]:size-x3', t5: 'text-t5 [&_[data-slot=link-content-suffix-icon]]:size-x3_5', t6: 'text-t6 [&_[data-slot=link-content-suffix-icon]]:size-x4', }, weight: { regular: 'font-regular', bold: 'font-bold', }, }, defaultVariants: { size: 't4', weight: 'regular', }, }, ); export interface LinkContentProps extends React.ComponentProps<'a'>, VariantProps<typeof linkContentVariants> { /** 자식 요소(라우터 Link, button 등)에 스타일을 입혀요. */ asChild?: boolean; /** 라벨 뒤에 붙는 아이콘이에요. 보통 오른쪽 화살표를 써요. */ suffixIcon?: React.ReactNode; /** 비활성 상태로 표시하고 이동을 막아요. */ disabled?: boolean; } function LinkContent({ className, size, weight, asChild = false, suffixIcon, disabled = false, children, ...props }: LinkContentProps) { const Comp = asChild ? Slot.Root : 'a'; return ( <Comp data-slot="link-content" aria-disabled={disabled || undefined} tabIndex={disabled ? -1 : undefined} className={cn(linkContentVariants({ size, weight }), className)} {...props} > {asChild ? ( children ) : ( <> <span data-slot="link-content-label">{children}</span> {suffixIcon && ( <Slot.Root data-slot="link-content-suffix-icon" aria-hidden> {suffixIcon} </Slot.Root> )} </> )} </Comp> ); } export { LinkContent, linkContentVariants };

/** * @title Link Content * @description 텍스트와 화살표 아이콘으로 다른 화면이나 콘텐츠로 이동하는 링크를 표현해요. */import * as React from 'react';import { Slot } from 'radix-ui';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';// SEED Rootage spec: link-content.yaml (SEED 3.0 에서 deprecated — Action Button ghost 권장)const linkContentVariants = cva( [ 'inline-flex cursor-pointer select-none items-center gap-x0_5 text-fg-neutral antialiased no-underline', 'rounded-r0_5 transition-[color,opacity] duration-(--rb-duration-color-transition) ease-easing', 'outline-2 outline-offset-2 outline-transparent focus-visible:outline-stroke-focus-ring', 'active:opacity-60', 'aria-disabled:pointer-events-none aria-disabled:text-fg-disabled', '[&_svg]:pointer-events-none [&_svg]:shrink-0', ], { variants: { size: { t4: 'text-t4 [&_[data-slot=link-content-suffix-icon]]:size-x3', t5: 'text-t5 [&_[data-slot=link-content-suffix-icon]]:size-x3_5', t6: 'text-t6 [&_[data-slot=link-content-suffix-icon]]:size-x4', }, weight: { regular: 'font-regular', bold: 'font-bold', }, }, defaultVariants: { size: 't4', weight: 'regular', }, },);export interface LinkContentProps extends React.ComponentProps<'a'>, VariantProps<typeof linkContentVariants> { /** 자식 요소(라우터 Link, button 등)에 스타일을 입혀요. */ asChild?: boolean; /** 라벨 뒤에 붙는 아이콘이에요. 보통 오른쪽 화살표를 써요. */ suffixIcon?: React.ReactNode; /** 비활성 상태로 표시하고 이동을 막아요. */ disabled?: boolean;}function LinkContent({ className, size, weight, asChild = false, suffixIcon, disabled = false, children, ...props}: LinkContentProps) { const Comp = asChild ? Slot.Root : 'a'; return ( <Comp data-slot="link-content" aria-disabled={disabled || undefined} tabIndex={disabled ? -1 : undefined} className={cn(linkContentVariants({ size, weight }), className)} {...props} > {asChild ? ( children ) : ( <> <span data-slot="link-content-label">{children}</span> {suffixIcon && ( <Slot.Root data-slot="link-content-suffix-icon" aria-hidden> {suffixIcon} </Slot.Root> )} </> )} </Comp> );}export { LinkContent, linkContentVariants };

Link Content

설치Copy Anchor Link

수동 설치

AnatomyCopy Anchor Link

PropertiesCopy Anchor Link

SizeCopy Anchor Link

WeightCopy Anchor Link

Suffix IconCopy Anchor Link

StateCopy Anchor Link

GuidelinesCopy Anchor Link

UsageCopy Anchor Link

오늘의 추천 상품

Action Button으로 옮기기Copy Anchor Link

PropsCopy Anchor Link

On this page

오늘의 추천 상품

설치

Anatomy

Properties

Size

Weight

Suffix Icon

State

Guidelines

Usage

Action Button으로 옮기기

Props