Button
명령과 폼 동작에 사용하는 버튼이에요. 여섯 가지 의도, 세 가지 표현 방식, 세 가지 크기를 제공해요.
핵심 속성
| 속성 | 값 | 기본값 | 용도 |
|---|---|---|---|
intent | neutral, primary, info, success, warning, danger | neutral | 동작의 목적이나 결과를 전달해요. |
appearance | solid, outline, ghost | solid | 의도는 유지하면서 시각적 강조를 바꿔요. |
uiSize | md, lg | md | 주변 컨트롤의 크기에 맞춰요. |
disabled | boolean | false | 동작을 실행하지 못하게 해요. |
loading | boolean | false | 동작을 막고 진행 중인 상태를 전달해요. |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/button.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRButton } from '@tinyrack/ui/components/button';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
기본 동작 고유 링크
주요 동작에는 `primary`를 지정하세요. TRButton은 기본적으로 HTML 버튼 요소를 렌더링해요.
예시
채움형 버튼의 의도 고유 링크
가장 강한 강조가 필요한 동작에는 `solid` 버튼을 사용하세요.
윤곽선 버튼의 의도 고유 링크
눈에 띄어야 하지만 강조를 낮춰야 하는 동작에는 `outline` 버튼을 사용하세요.
투명형 버튼의 의도 고유 링크
복잡하지 않은 화면에서 강조가 낮은 동작에는 `ghost` 버튼을 사용하세요.
크기 고유 링크
동작의 중요도가 아니라 주변 컨트롤에 맞춰 크기를 선택하세요.
상태 고유 링크
동작을 사용할 수 없을 때는 `disabled`를, 진행 중일 때는 `loading`을 사용하세요.
API
Tinyrack 전용 속성
| 속성 | 타입 | 기본값 | 용도 |
|---|---|---|---|
intent | neutral | primary | info | success | warning | danger | neutral | 동작의 의미와 색상 역할을 정해요. |
appearance | solid | outline | ghost | solid | 의미는 유지하면서 시각적 강조 방식을 정해요. |
uiSize | md | lg | md | 버튼 크기를 정해요. |
loading | boolean | false | 동작을 막고 진행 중인 상태를 전달해요. |
loadingLabel | string | 없음 | 로딩 중에 사용할 접근 가능한 이름을 정해요. |
variant | secondary | primary | danger | secondary | 이전 API와의 호환을 위한 속성이에요. 새 코드에서는 intent를 사용하세요. |
HTML 요소와 상속 속성
TRButtonProps는 Base UI Button 속성을 확장해요.
| 상속 속성 | 기본값 | 동작 |
|---|---|---|
disabled | false | 동작을 실행하지 못하게 해요. |
focusableWhenDisabled | false | true이면 비활성화된 버튼을 포커스 순서에 유지해요. |
render | 없음 | 다른 요소나 컴포넌트에 버튼 동작과 스타일을 적용해요. |
nativeButton | true | 렌더링한 요소가 네이티브 <button>인지 지정해요. |
type | 네이티브 버튼에서 button | 일반 버튼, 제출, 초기화 동작을 선택해요. |
네이티브 버튼 속성과 React 이벤트 핸들러, 상태에 따라 값을 정할 수 있는
className과 style, React 19 ref도 지원해요.
TRButton은 기본적으로 type="button"인 HTML <button>을 렌더링해요. 폼
안에서 제출하거나 초기화하려면 type="submit" 또는 type="reset"을
명시하세요. render로 <button>이 아닌 요소를 사용할 때는
nativeButton={false}를 설정해야 해요. 그러면 Base UI가 네이티브 type
속성을 추가하지 않고 버튼 동작을 제공해요. 버튼의 역할은 그대로 유지되므로
페이지 이동에는 TRLink를 사용하세요.
로딩과 접근 가능한 이름
loading이 true이면 동작을 막고 aria-hidden 스피너를 앞에 추가하며
aria-busy="true"를 설정해요. loadingLabel을 생략하면 기존의 접근 가능한
이름을 유지해요. loadingLabel을 제공하면 로딩 중에 임시 접근 가능한 이름으로
사용하고 기존 aria-labelledby를 대신해요. loading이 false이면 명시한
aria-busy 값을 유지해요.
이전 variant와의 호환성
더 이상 권장하지 않는 variant는 이전 코드와의 호환을 위해 유지해요.
secondary는 neutral로, primary와 danger는 같은 이름의 intent로
매핑해요. intent를 명시하면 variant보다 우선해요.