Buttons - Kitchen Sink

← Kitchen Sink로 돌아가기

💡 참고: Button 컴포넌트는 shadcn/ui 구조와 호환되도록 설계되었습니다. variant와 size prop을 사용하여 스타일을 지정할 수 있으며, 추가 스타일은 class prop으로 지정할 수 있습니다.

Variants

variant prop으로 스타일 지정

          <Button variant="default" size="default">Default</Button> <Button
          variant="secondary" size="default">Secondary</Button> <Button
          variant="outline" size="default">Outline</Button> <Button variant="ghost"
          size="default">Ghost</Button> <Button variant="link"
          size="default">Link</Button>
        

Sizes

size prop으로 크기 지정

          <Button variant="secondary" size="xs">Extra Small</Button> <Button
          variant="secondary" size="sm">Small</Button> <Button variant="secondary"
          size="default">Default</Button> <Button variant="secondary"
          size="md">Medium</Button> <Button variant="secondary"
          size="lg">Large</Button>
        

Size별 높이 및 패딩

💡 Size 스타일:

xs: h-28 py-4 px-8
sm: h-32 py-6 px-12
default: h-36 py-8 px-12
md: h-40 py-8 px-12
lg: h-[50px] p-8

사용자 정의 높이/패딩 클래스가 있으면 size 스타일이 적용되지 않습니다.

Icon Buttons

size="icon"으로 아이콘 버튼 생성

          <Button size="icon" class="w-20 h-20" aria-label="add to cart">
          <svg>...</svg> </Button>
        

With Icons

iconPosition prop으로 아이콘 위치 지정

          <Button variant="secondary" size="default" iconPosition="left"> <svg
          slot="icon">...</svg> Left Icon </Button>
        

Link as Button

to prop으로 링크 사용 (a 태그로 렌더링)

Kitchen Sink로 이동 홈으로 이동 Link Style

          <Button to="/kitchen-sink" variant="secondary" size="default">Kitchen Sink로
          이동</Button> <Button to="/" variant="outline" size="default">홈으로
          이동</Button> <Button to="/" variant="link" size="default">Link
          Style</Button>
        

외부 링크

StyleKorean 방문

          <Button to="https://www.stylekorean.com" target="_blank" rel="noopener noreferrer"
          variant="secondary" size="default"> StyleKorean 방문 </Button>
        

Button Types

기본적으로 type="button" 적용됨

          <Button variant="secondary" size="default">Button (기본값)</Button> <Button
          type="submit" variant="secondary" size="default">Submit Button</Button>
          <Button type="reset" variant="outline" size="default">Reset Button</Button>
        

States

Disabled

Disabled Link

          <Button disabled variant="secondary" size="default">Disabled Button</Button>
          <Button to="#" disabled variant="outline" size="default">Disabled
          Link</Button>
        

Full Width

          <Button variant="secondary" size="default" class="w-full">Full Width
          Button</Button>
        

Props

Prop	Type	Default	Description
`variant`	"default" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	버튼 스타일 변형
`size`	"default" \| "xs" \| "sm" \| "md" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"	버튼 크기
`iconPosition`	"left" \| "right"	"left"	아이콘 위치 (icon slot 사용 시)
`justify`	"start" \| "center" \| "end" \| "between"	"center"	내부 콘텐츠 정렬
`gap`	string	""	내부 요소 간 간격 (Tailwind 클래스)
`textClass`	string	""	텍스트 스타일 클래스 (variant="link"일 때)
`to`	string	-	링크 URL (설정 시 a 태그로 렌더링)
`disabled`	boolean	false	비활성화 상태
`type`	"button" \| "submit" \| "reset"	"button"	button 태그의 type 속성 (to prop 없을 때만)
`target`	"_blank" \| "_self" \| "_parent" \| "_top"	-	링크 target 속성 (to prop 있을 때만)
`rel`	string	-	링크 rel 속성 (to prop 있을 때만)
`class`	string	-	추가 Tailwind CSS 클래스