행동과 오버레이@neumorphism-ui/button

Button

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

@neumorphism-ui/button

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/button

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

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

Example

<div className="flex gap-3">
  <Button variant="primary">변경 저장</Button>
  <Button variant="soft">취소</Button>
  <Button variant="ghost">나중에</Button>
  <Button size="icon" aria-label="항목 추가">+</Button>
</div>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`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`	클릭과 키보드 동작을 비활성화합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성