Buttons - Kitchen Sink

⚠️ 현재 상태: 버튼 컴포넌트는 간소화 버전입니다. 현재는 아이콘 버튼 용도로만 사용 중이며, variant/size props는 제거되었습니다. 디자인 확정 시 필요한 기능을 추가할 예정입니다.

💡 사용 방법: Tailwind CSS 클래스를 직접 전달하여 사용합니다. 기본적으로 포커스 스타일만 적용되어 있으며, 나머지 스타일은 class prop으로 지정합니다.

Icon Only Buttons (현재 주요 사용 사례)

아이콘 버튼 예제

          <Button class="flex-shrink-0 w-20 h-20 bg-transparent" aria-label="add to cart">
          <svg>...</svg> </Button> <Button to="#" class="w-[26px] h-[26px]"
          aria-label="more"> <svg>...</svg> </Button> <Button class="flex
          items-center justify-center w-10 h-10 bg-gray-100 rounded-full hover:bg-gray-200"
          aria-label="close"> <svg>...</svg> </Button>
        

기본 사용법 (Tailwind 클래스)

Tailwind 유틸리티 클래스로 스타일링

          <Button class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm
          font-medium text-white bg-black rounded-md hover:bg-black/90"> Primary Style
          </Button> <Button class="inline-flex items-center justify-center h-10 px-4 py-2
          text-sm font-medium bg-gray-100 rounded-md hover:bg-gray-200"> Secondary Style
          </Button> <Button class="inline-flex items-center justify-center h-10 px-4 py-2
          text-sm font-medium border border-gray-300 rounded-md hover:bg-gray-50"> Outline Style
          </Button>
        

Link as Button

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

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

          <Button to="/kitchen-sink" class="inline-flex items-center justify-center h-10 px-4
          py-2 text-sm font-medium text-white bg-black rounded-md hover:bg-black/90"> Kitchen
          Sink로 이동 </Button>
        

외부 링크

StyleKorean 방문

          <Button to="https://www.stylekorean.com" target="_blank" rel="noopener noreferrer"
          class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium
          text-white bg-black rounded-md hover:bg-black/90" > StyleKorean 방문 </Button>
        

Button Types

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

          <Button class="...">Button (기본값)</Button> <Button type="submit"
          class="...">Submit Button</Button> <Button type="reset" class="...">Reset
          Button</Button>
        

States

Disabled

Disabled Link

          <Button disabled class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm
          font-medium text-white bg-black rounded-md opacity-50 cursor-not-allowed"> Disabled
          Button </Button>
        

Full Width

          <Button class="flex items-center justify-center w-full h-10 px-4 py-2 text-sm
          font-medium text-white bg-black rounded-md hover:bg-black/90"> Full Width Button
          </Button>
        

Focus States

💡 참고: 기본적으로 포커스 스타일이 적용되어 있습니다:

focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
            focus-visible:ring-offset-2

Tab 키로 포커스 확인

Props

Prop	Type	Default	Description
`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 클래스 (필수: 모든 스타일을 여기서 지정)

향후 계획

📋 디자인 확정 후 추가 예정:

variant prop (primary, secondary, outline, ghost, link, destructive 등)
size prop (sm, md, lg 등)
피그마 디자인 토큰 기반 스타일