Button

<Button styleType={styleType} backdrop={backdrop} type={type} className={className}>
  {children}
</Button>

✨ 어떤 기능을 하나요?

디자인 시스템에 존재하는 리액트 버튼 컴포넌트입니다.

Button 컴포넌트는 디자인 시스템을 따르는 새로운 사각형 버튼을 만들 때 사용합니다. 사각형 버튼이 아닌 버튼의 경우, 네이티브 button 엘리먼트를 사용하세요.

<Button onClick={()=>alert("hello, world!")} styleType="filled" backdrop="white" type="submit" className="text-body-l">
  클릭하세요!
</Button>

이 컴포넌트는 아래를 렌더링하고, 클릭 시 hello, world!를 alert 창에 출력합니다.

styleType : 버튼의 스타일 타입입니다. filled (채워진 스타일), ghost (배경이 비워져 있고 테두리가 있는 스타일) 2개가 존재합니다. 기본값은 filled입니다.
backdrop : 버튼이 어느 환경에 존재하는지를 결정합니다. light (밝은 배경), dark (어두운 배경) 2개가 존재합니다. 기본값은 light입니다.
className : 이 버튼에 추가적으로 정의할 수 있는 클래스 이름입니다. 패딩의 경우, 사용자가 따로 패딩을 설정하지 않는다면 px-6, py-4가 기본적으로 설정되어 있습니다.
type : 원래 button 엘리먼트의 타입과 같습니다. submit, reset, button을 받을 수 있으며, 기본값은 buttn`입니다.
children : 버튼 내부에 들어갈 요소입니다. 모든 렌더링 가능한 리액트 요소가 들어갈 수 있습니다.
그 외 onClick 등, 네이티브 button 엘리먼트에 들어가는 모든 props를 받을 수 있습니다.

<Button styleType="filled" backdrop="white" >버튼명</Button>

<Button styleType="ghost" backdrop="white" >버튼명</Button>

<Button styleType="filled" backdrop="black" >정답 보기</Button>

<Button styleType="ghost" backdrop="black" >이벤트 공유하기</Button>