Button

설치 확인

primary·secondary·outline·ghost·destructive, 크기, 아이콘, loading, disabled

1. 목적과 출처

primary·secondary·outline·ghost·destructive, 크기, 아이콘, loading, disabled

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

variant

size

disabled아이콘

import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"

<Button>
  <Plus data-icon="inline-start" />
  새 이슈
</Button>

npx shadcn@4.23.0 add @adcapsule/button

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Button variant="outline" size="sm">취소</Button>

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/button

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Button variant="outline" size="sm">취소</Button>

5. 바꿔도 되는 것과 유지할 토큰