버튼
안정primitive누르면 동작이 실행되는 버튼입니다. 강조 정도에 따라 주요·보조·고스트·위험 네 가지가 있습니다.
@tissue-ui/layout-react설치
bash
npm install @tissue-ui/layout-reacttsx
import { Button } from "@tissue-ui/layout-react";언제 쓰나
- 사용자가 눌러 동작을 실행하게 할 때.
- 강조 정도에 따라 주요·보조·고스트·위험으로 구분해 쓰세요.
플레이그라운드
variant
size
loading
disabled
tsx
<Button variant="primary" size="md">버튼</Button>예제
종류(variant)
강조 정도에 따라 네 가지 스타일을 제공합니다.
크기
상태
처리 중이거나 사용할 수 없는 상태.
아이콘과 함께
children 에 아이콘을 함께 넣습니다.
전체 너비
style·className 등 일반 HTML 속성이 그대로 전달됩니다.
속성
| 속성 | 타입 | 설명 |
|---|---|---|
| variant | primary | secondary | ghost | danger | 얼마나 강조할지 고릅니다 (기본 보조). |
| size | sm | md | lg | 버튼 높이입니다 (기본 보통). |
| loading | boolean | 처리 중일 때 스피너를 돌리고 잠시 못 누르게 합니다. |
위 옵션 말고도 className·onClick 같은 일반 HTML 속성을 그대로 넘길 수 있습니다.
상태
defaulthoverfocusactivedisabledloading
data 속성
data-disableddata-loading
이 페이지의 옵션·상태는 실제 코드 정의에서 그대로 가져온 것입니다. 에이전트는 같은 내용을 llms.txt 로 읽습니다.