@dossierhq/design/lib/components/Button/Button.js

The design system for Dossier.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, } from 'react';
import { toColorClassName } from '../../config/Colors.js';
import { toClassName } from '../../utils/ClassNameUtils.js';
import { Icon } from '../Icon/Icon.js';
export const Button = forwardRef(({ className, iconLeft, iconRight, color, style, title, children, ...props }, ref) => {
    const realClassName = toClassName('button', toColorClassName(color), className);
    const content = (_jsxs(_Fragment, { children: [iconLeft ? _jsx(Icon, { icon: iconLeft }) : null, (iconLeft || iconRight) && children ? _jsx("span", { children: children }) : children, iconRight ? _jsx(Icon, { icon: iconRight }) : null] }));
    if (props.as === 'a') {
        return (_jsx("a", { ref: ref, className: realClassName, href: props.href, target: props.target, style: style, title: title, children: content }));
    }
    return (_jsx("button", { ref: ref, className: realClassName, style: style, title: title, onClick: props.onClick, onMouseDown: props.onMouseDown, disabled: props.disabled, type: props.type, children: content }));
});
Button.displayName = 'Button';
//# sourceMappingURL=Button.js.map