Button

Button은 사용자가 클릭 또는 탭하여 특정 동작을 수행할 수 있는 인터페이스 요소입니다.
일반적으로 텍스트로 표시되며 원하는 동작을 수행합니다.
각 버튼에는 primary, destructive, secondary, outline, link, ghost 등 여섯 가지 Variant와
두가지의 disabled, asChild 속성이 있습니다.

❗️ Button 컴포넌트 스타일이 적용되지 않는 경우

tailwind.config.js 파일에서 preflight 속성을 false로 변경해주세요.

tailwind.config.js

 
module.exports = {
corePlugins: {
    preflight: false,
  },
  ...
}

Primary

 
  <Button 
    variant="primary" 
    text="로그인" 
    /* 원하는 코드 추가 가능 */
  />

Destructive

 
  <Button 
    variant="destructive" 
    text="로그인" 
    /* 원하는 코드 추가 가능 */
  />

Secondary

 
  <Button 
    variant="secondary" 
    text="로그인" 
    /* 원하는 코드 추가 가능 */
  />

Outline

 
  <Button 
    variant="outline" 
    text="로그인" 
    /* 원하는 코드 추가 가능 */
  />

Link

default

hover

 
  <Button 
    variant="link" 
    text="로그인" 
    /* 원하는 코드 추가 가능 */
  />

Ghost

default

hover

 
  <Button 
    variant="ghost" 
    text="로그인" 
    /* 원하는 코드 추가 가능 */
  />

Disabled

 
  <Button 
    variant="ghost" 
    text="로그인" 
    disabled
    /* 원하는 코드 추가 가능 */
  />

asChild

 
  <Button 
    variant="secondary" 
    text="로그인" 
    asChild
    /* 원하는 코드 추가 가능 */
  />

Using example

버튼안에 size와 weight 값을 변경 가능합니다.
5종류의 크기와 3종류의 굵기 정도를 조절 가능합니다.
Text컴포넌트와 동일한 크기과 굵기입니다.

 
  <Button 
    variant="secondary" 
    text="로그인" 
    asChild
    className=""
    textSize="size값"
    textWeight="weight값"
  />

Size	weight (R,M,B)	Description
base	`medium`, `semibold`, `bold`	`Body3_16` 을 나타냅니다.
xs		`Body5_12` 을 나타냅니다.
sm		`Body4_14` 을 나타냅니다.
lg		`Body2_18` 을 나타냅니다.
xl		`Body1_20` 을 나타냅니다.

Breadcrumb Card