버튼

버튼은 어떤 기능이나 동작을 실행하거나 기능을 사용하기 위한 상태로 변경하는 요소이다.

사용 지침

주(primary)·보조(secondary)·3차(tertiary) 위계를 한 화면에 함께 사용하되 주 버튼은 화면당 하나로 제한하고, 동작 결과가 예측 가능한 명확한 동사형 라벨을 사용합니다.

examples/button/ButtonPrimary.tsx

import { Button } from "@/components/ui/dynamic/button"

export default function ButtonPrimary() {

examples/button/ButtonSecondary.tsx

import { Button } from "@/components/ui/dynamic/button"

export default function ButtonSecondary() {

examples/button/ButtonTertiary.tsx

import { Button } from "@/components/ui/dynamic/button"

export default function ButtonTertiary() {

examples/button/ButtonText.tsx

import { Button } from "@/components/ui/dynamic/button"

export default function ButtonText() {

examples/button/ButtonDisabled.tsx

import { Button } from "@/components/ui/dynamic/button"

export default function ButtonDisabled() {

examples/button/ButtonIcon.tsx

import { SearchIcon, Trash2Icon } from "lucide-react"

import { Button } from "@/components/ui/dynamic/button"

examples/button/ButtonSizes.tsx

import { Button } from "@/components/ui/dynamic/button"

export default function ButtonSizes() {

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
asChild	boolean	false	—
className	string	—	—
disabled	boolean	—	—
id	string	—	—
onClick	MouseEventHandler<HTMLButtonElement>	—	—
shape	enum	default	KRDS `.krds-btn.icon.border` — when "circle", renders a circular (rounded-full) bordered icon-only button. Additive; the default keeps the existing per-size rounding. Pair with `size="icon"` for the canonical circular icon button.
size	"default" \| "xs" \| "sm" \| "lg" \| "xl" \| "icon" \| null	default	—
style	CSSProperties	—	—
tabIndex	number	—	—
type	enum	—	—
variant	"default" \| "secondary" \| "outline" \| "ghost" \| "link" \| "tertiary" \| "text" \| null	default	—