Button

<Button title="저장" />
<Button title="취소" variant="secondary" />
<Button title="삭제" variant="destructive" />
<Button title="설정" variant="outline" />
<Button title="더보기" variant="ghost" />

<Button><Mail className="size-4" /> 메일 보내기</Button>
<Button variant="outline"><Plus className="size-4" /> 새로 만들기</Button>

<Button title="빨강" backgroundColor="#e8553d" />
<Button title="보라" backgroundColor="#7c3aed" />
<Button title="초록" backgroundColor="#16a34a" />
<Button title="회색" backgroundColor="#6b7280" color="#fff" />

<Button title="빨강 비활성" backgroundColor="#e8553d" disabled />
<Button title="보라 비활성" backgroundColor="#7c3aed" disabled />
<Button title="초록 비활성" backgroundColor="#16a34a" disabled />

<Button
  title="밝은 배경"
  backgroundColor="#f1f5f9"
  color="#334155"
  borderColor="#e2e8f0"
/>
<Button
  title="테두리 강조"
  backgroundColor="#fff"
  color="#7c3aed"
  borderColor="#7c3aed"
/>

<Button title="큰 글씨" fontSize="18px" />
<Button title="가는 글씨" fontWeight="300" />
<Button title="Bold" fontWeight="800" backgroundColor="#16a34a" />
<Button title="기울임" fontStyle="italic" variant="secondary" />

import { Search, Mail, Plus } from "lucide-react"
 
<Button title="검색" icon={<Search />} />
<Button title="메일" icon={<Mail />} variant="secondary" />
<Button title="추가" icon={<Plus />} backgroundColor="#16a34a" />

<Button title="로딩 중" loading />
<Button title="커스텀 색상 로딩" backgroundColor="#7c3aed" loading />
<Button title="보조 로딩" loading variant="secondary" />

<Button title="보이는 버튼" visible={true} />
<Button title="숨겨진 버튼" visible={false} />

<Button title="레이블 없음" />
<Button title="빈 레이블" showLabel />
<Button title="저장" label="동작" />

<Button
  title="저장"
  shortcut={[["ctrl", "s"], ["meta", "s"]]}
  onClick={() => alert("저장 단축키 실행!")}
/>
<Button
  title="저장 (Mac)"
  shortcut={[["meta", "s"]]}
  onClick={() => alert("⌘S 단축키 실행!")}
  variant="outline"
/>
<Button
  title="검색"
  shortcut={[["ctrl", "k"], ["meta", "k"]]}
  variant="secondary"
  onClick={() => alert("검색 단축키 실행!")}
/>