Button

라벨이 있는 액션 버튼 — variant 4종(solid/outlined/frosted/danger) × size 4종, leading/trailing slot, loading

사용

import { Button } from "@fluxloop-ai/pds-ui/components/button";

<Button variant="solid">시작하기</Button>
<Button>저장</Button>
<Button variant="frosted" size="sm">취소</Button>
<Button variant="danger" loading>삭제</Button>

Button 은 라벨이 들어가는 액션 버튼이다. 아이콘만 있는 자리는 IconButton, 배경 없는 글자만의 인터랙션은 TextButton 을 쓴다.

Variant

4 종 — solid / outlined / frosted / danger.

solid — 브랜드 컬러 fill + inverse 라벨. 페이지 단위 CTA 1개.
outlined — 1px 테두리 (default). 기본 액션.
frosted — fill-normal + backdrop-filter blur(32px). 반투명/오버레이 위에서 읽히는 톤. (PDS 고유)
danger — negative 액션 (status-negative).

Size

xs(28/r8) · sm(32/r10) · md(36/r12) · lg(44/r12). radius 는 높이의 약 30% 비율.

Icon + Slot

leadingContent / trailingContent 로 아이콘/텍스트 주입. Button 사이즈에 따라 슬롯 아이콘이 자동 스케일: xs=12 / sm=14 / md=16 / lg=16.

아이콘만 있는 케이스는 Button 이 아니라 IconButton 을 쓴다.

Loading

loading 상태에서 이벤트 차단 + 스피너 표시. 본문은 invisible 로 레이아웃 유지.

Props

Prop	타입	기본	설명
`variant`	`solid \| outlined \| frosted \| danger`	`outlined`	색/톤
`size`	`xs \| sm \| md \| lg`	`sm`	크기
`fullWidth`	`boolean`	`false`	`width:100%`
`loading`	`boolean`	`false`	스피너 + disabled
`leadingContent`	`ReactNode`	—	좌측 슬롯
`trailingContent`	`ReactNode`	—	우측 슬롯
`asChild`	`boolean`	`false`	Radix Slot 위임 (Link 등)

IconButton / TextButton 과의 분리 원칙

텍스트가 들어간다 → Button
아이콘만, 액션 영역 바깥 → IconButton
배경 없이 글자만 → TextButton

Registry 설치

npx shadcn add https://pds.pluto.com/r/button