Maeng Design

Button

Maeng Design의 Button 컴포넌트는 6종류의 타입과 3종류의 모양 그리고 3종류의 사이즈로 구성되어있습니다.

Type

default, primary, dashed, text, link, outline 6가지의 type이 존재합니다.
import React from 'react';
import { Button } from 'maeng-design';
const App = () => (
  <div>
    <Button type="default">Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">Text</Button>
    <Button type="link">Link</Button>
    <Button type="outline">Outline</Button>
  </div>
);

Shape

default, circle, round 3가지의 shape가 존재합니다.
import React from 'react';
import { Button } from 'maeng-design';
const App = () => (
  <div>
    <Button shape="default">Default</Button>
    <Button shape="circle">C</Button>
    <Button shape="round">Round</Button>
  </div>
);

Size

small, medium, large 3가지의 size가 존재합니다.
import React from 'react';
import { Button } from 'maeng-design';
const App = () => (
  <div>
    <Button size="small">Small</Button>
    <Button size="medium">Medium</Button>
    <Button size="large">Large</Button>
  </div>
);

API

Button 속성을 설정하여 다양한 버튼 스타일을 생성할 수 있습니다.
PropertyDescriptionTypedefault
type버튼의 타입을 지정할 수 있습니다.default primary dashed text link outlinedefault
shape버튼의 모양을 지정할 수 있습니다.default circle rounddefault
size버튼의 크기를 지정할 수 있습니다.small medium largemedium
htmlType버튼의 오리지널 html 타입을 지정할 수 있습니다.button submit resetbutton
color버튼의 색상을 지정할 수 있습니다.ColorNameblue6
disabled버튼을 비활성화 시킬 수 있습니다.booleanfalse
onClickclick 이벤트를 처리하는 핸들러 설정(event) => void-
Made by Maeng