TextButton

텍스트 위계와 native button 또는 anchor 의미로 가벼운 행동과 이동을 표현합니다.

예제

사용해야 할 때

화면 안의 가벼운 보조 행동, 낮은 위계의 command, 문맥을 유지하는 상세 이동에 사용합니다. 이동은 href를 제공해 anchor로, 현재 화면의 동작은 button으로 표현합니다.

사용하지 말아야 할 때

폼 제출이나 결제처럼 강한 시각 위계가 필요한 주 행동에는 Button을 사용합니다. icon만으로 충분한 compact action에는 IconButton을 사용하고, href 없이 페이지 이동을 흉내 내지 않습니다.

구조

root native button 또는 a 안에 string label이 있습니다. arrow만 library가 소유하는 decorative Icon/ChevronRight를 trailing 위치에 추가하며 임의 icon slot은 받지 않습니다.

크기와 변형

small, medium, large는 각각 caption, body-small, body typography를 사용하면서 모두 44px minimum target을 지킵니다. clear는 persistent decoration이 없고, underline은 hover 전에도 밑줄이 보이며, arrow는 owned chevron으로 이동 방향을 보조합니다.

상태와 동작

기본값은 size="medium", variant="clear", tone="primary"입니다. primary와 neutral tone은 semantic action/text token만 사용합니다. hover, pressed, focus-visible, visited anchor는 구분되며 native disabled는 button 분기에만 존재합니다. anchor에 fake disabled state를 만들지 않습니다.

반응형 동작

TextButton은 320px content에서도 label을 줄바꿈하고 container 경계를 넘지 않습니다. 같은 API가 mobile, tablet, desktop에 적용되며 caller class로 주변 layout을 확장할 수 있습니다. Inline style은 외부 배치용 margin, order, self alignment, grid placement만 보존하고 component-owned 색상, 배경, target 크기, flex sizing은 무시합니다.

접근성

button은 Enter와 Space activation 및 form semantics를, anchor는 navigation과 visited semantics를 브라우저에 맡깁니다. 모든 크기는 44px minimum pointer target과 normal/forced-colors focus indicator를 유지합니다. arrow icon은 aria-hidden="true"이고 accessible name은 localizable string label만 사용합니다.

React 예제

import { TextButton } from '@hds/react';
import '@hds/react/styles.css';

export function HelpActions() {
  return (
    <nav aria-label="도움말">
      <TextButton href="/refunds" variant="underline">
        환불 정책
      </TextButton>
      <TextButton type="button" variant="arrow">
        다음 단계
      </TextButton>
    </nav>
  );
}

API

사용 토큰

• size/control/small, size/icon/small, space/0, space/2, space/4, space/8, space/12, space/16, radius/sm
• font/family/sans, caption/body-small/body size와 line-height, font/weight/semibold
• motion/duration/fast, motion/easing/standard, color/action/*, color/text/*, color/bg/subtle, color/focus/ring

Figma

TextButton component set은 Size 3 × Variant 3 × State Default/Pressed/Disabled = 27 variants와 Label TEXT property를 가집니다. Arrow variant는 owned Icon/ChevronRight instance를 사용하고 visited anchor는 browser content state라 variant axis에서 제외합니다. Underline은 TEXT property의 variant 간 style 동기화를 피하기 위해 token-bound structural underline layer로 표현합니다. 구현 방향은 TDS Mobile TextButton reference와 함께 검토합니다.

지원 상태