버튼 (Button)

Usage

1import { Button } from "podo-ui/react";2import "podo-ui/styles.css";3
4<Button theme="solid-primary">Save</Button>

크기 (size)

버튼 크기는 사용 위치와 동작의 중요도에 따라 xs(32), sm(36), md(42), lg(52) 사이즈로 구분해 사용해요. xs·sm은 테이블이나 카드처럼 밀도가 높은 영역의 보조 동작에, md는 일반 화면 대부분의 기본 동작에, lg는 주요 CTA나 인풋과 함께 쓰여 강조가 필요한 동작에 사용하며, 일관된 크기 체계를 통해 화면 전반의 정렬과 균형을 유지해요.

레이아웃 (layout)

버튼 레이아웃은 전달할 정보와 동작의 성격에 따라 text, prefix, suffix 구성으로 구분해 사용해요. text는 레이블만으로 동작이 충분히 전달될 때, prefix는 동작의 의미를 보조하는 아이콘을 텍스트 앞에 두어 인지를 빠르게 할 때, suffix는 이동·확장·다음 단계처럼 방향성이나 결과를 암시하는 아이콘을 텍스트 뒤에 둘 때 사용해요. 텍스트와 아이콘을 목적에 맞게 조합하면 버튼의 의미가 더 명확해지고, 일관된 레이아웃 체계를 통해 화면 전반의 정렬과 시각적 균형을 유지해요.

테마 (theme)

동작의 위계와 사용 맥락에 따라 solid·outline의 형태와 primary·assistive·white·danger의 테마를 조합해 사용해요. solid는 가장 중요한 주요 동작을 또렷하게 강조할 때, outline은 주요 동작을 보조하거나 부담을 줄여야 할때 쓰고, 핵심 동작에 primary, 중립적·보조적 동작에 assistive, 색상 배경이나 이미지 위에서는 white, 삭제처럼 되돌리기 어려운 파괴적 동작에는 danger를 사용해요. 테마를 위계에 맞게 조합하면 한 화면 안에서도 동작의 중요도와 성격이 명확히 구분되어, 사용자의 선택을 자연스럽게 유도해요.

상태 (state)

버튼 상태는 사용자의 상호작용에 따라 normal, hover, pressed, disabled로 구분해 표현해요. hover와 pressed는 지금 조작이 일어나고 있음을 즉각적인 피드백으로 알려주고, disabled는 현재 사용할 수 없는 동작임을 시각적으로 구분해 혼란을 줄이며, 일관된 상태 체계를 통해 모든 버튼이 예측 가능하게 반응하도록 해요.

속성 (props)

podo-ui/react의 Button이 받는 속성이에요. 앞서 시안의 layout(text·prefix·suffix)은 코드에서는 prefix·suffix 두 슬롯(ReactNode)으로 표현하며, 둘을 동시에 넣을 수도 있어요. 이 밖에 표준 button 속성(className, aria-*, type 등)도 그대로 전달돼요.