@scriptify_js/react/dist/cjs/components/button/Button.cjs

A custom React UI library for Scriptify projects

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.cjs');
var React = require('react');

const SfButton = (_a) => {
    var _b;
    var { label, onClick, href = "", className = "", color = "#1976d2", style = {} } = _a, props = tslib_es6.__rest(_a, ["label", "onClick", "href", "className", "color", "style"]);
    const finalStyle = Object.assign(Object.assign({}, style), { backgroundColor: (_b = style.backgroundColor) !== null && _b !== void 0 ? _b : color });
    return (React.createElement("button", Object.assign({ className: `custom-button ${className}`, onClick: onClick, style: finalStyle }, props), href.length > 0
        ? React.createElement("a", { href: href, target: "_blank" }, label)
        : label));
};
/*
Parameters
    label:(String) - 버튼에 원하는 텍스트를 넣을수 있다.
        ex: <Button label="Submit" />

    className:(String) - 클래스 속성을 지정 할 수 있다
        ex: <Button className="isActive" />

    onClick:(Function) - 클릭이벤트의 콜백 함수가 실핼된다.
        ex: <Button onClick={btnHandler} />

    href:(String) - 해당 링크가 새창에서 띄워진다.
        ex: <Button href="www.google.com" />

    color:(String) - 컬러 속성은 버튼의 컬러만 바로 바꿀수 있다.
        ex: <Button color="blue" />

    style:(object) - 버튼의 상세 스타일을 지정할수 있다. color와 style에 background color를 두개의 속성이 지정되면 style의 스타일을 우선으로 적용한다
        ex: <Button style={{backgroundColor:gray}} color: "blue"> **style 우선 적용**
*/

module.exports = SfButton;
//# sourceMappingURL=Button.cjs.map