Button

저장, 대화상자 열기, 상태 변경 같은 동작에 사용합니다. 다른 페이지로 이동할 때는 링크를 사용하세요.

미리보기

버튼 종류와 크기

primary, soft, ghost, destructive 표현과 작은 버튼, 큰 버튼, 아이콘 버튼, 비활성 상태를 비교합니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/button

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

의미가 분명한 텍스트부터 넣고 variant로 강조 수준, size로 크기를 정하세요. 폼 안에서는 type을 명시하고 아이콘만 있는 버튼에는 접근 가능한 이름을 지정합니다.

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

export default function Example() {
  const [saved, setSaved] = useState(false);
  return (
    <div>
      <Button variant="primary" onClick={() => setSaved(true)}>Save changes</Button>
      <p role="status">{saved ? "Changes saved." : "Unsaved changes."}</p>
    </div>
  );
}

API 레퍼런스

네이티브 button을 사용해 폼과 키보드 동작을 그대로 유지합니다. 다섯 가지 variant와 네 가지 size를 제공하며 active 상태는 inset shadow로 눌림을 표현합니다.

컴포넌트	속성	타입	기본값	설명
`Button`	`variant`	`"default" \| "primary" \| "soft" \| "ghost" \| "destructive"`	`"default"`	버튼의 의미와 표면 강조를 선택합니다.
`Button`	`size`	`"sm" \| "default" \| "lg" \| "icon"`	`"default"`	높이와 좌우 여백을 선택합니다.
`Button`	`type`	`"button" \| "submit" \| "reset"`	`"button"`	네이티브 버튼 동작을 결정합니다.
`Button`	`disabled`	`boolean`	`false`	클릭과 키보드 동작을 비활성화합니다.

미리보기

버튼 종류와 크기

설치

사용법

API 레퍼런스

접근성