Button

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

버튼의 강조도를 의미와 별개로 정하세요. primary는 영역당 핵심 동작 하나를 브랜드 면 위에 표시합니다. secondary(테두리 없는 중립 서피스)와 outline(유일한 테두리 변형)은 보조 동작을 표시하고, ghost는 낮은 강조도를 표시합니다. destructive는 어떤 우선순위에서든 위험을 알립니다. variant를 주지 않으면 primary입니다.

페이지 내비게이션에 Button을 사용하지 마세요. 버튼 모양이면서 링크로 남는 LinkButton을 사용하세요. destructive 동작을 색만으로 표시하지 마세요. 라벨 텍스트에 동작을 설명하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Button → optional SVG icon + text that describes the action

키보드와 접근성

Tab은 포커스를 이동합니다. Enter 또는 Space는 버튼을 활성화합니다. 동작이 도는 동안에는 버튼을 비활성화하거나 옆에 진행을 보이고, 결과는 라이브 영역 하나에서 알리세요.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Button, LinkButton, Text } from '@surflane/ui'
import NextLink from 'next/link'

<Button onClick={runPreview}>Run preview</Button>
<Button variant='outline'>Inspect details</Button>
<Button disabled aria-describedby='deploy-reason'>Deploy</Button>
<Text id='deploy-reason' variant='caption'>Production is frozen until Monday.</Text>

// Navigation that looks like a button stays a link.
<LinkButton variant='outline' render={<NextLink href='/runs' />}>
  View runs
</LinkButton>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰