1
0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-23 09:46:43 +01:00
umami/components/common/Button.js

63 lines
1.6 KiB
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
2020-08-15 10:17:15 +02:00
import ReactTooltip from 'react-tooltip';
import classNames from 'classnames';
import Icon from './Icon';
import styles from './Button.module.css';
function Button({
2020-08-07 09:24:01 +02:00
type = 'button',
icon,
size,
variant,
2020-08-07 09:24:01 +02:00
children,
className,
2020-08-15 10:17:15 +02:00
tooltip,
tooltipId,
2020-09-26 07:31:18 +02:00
disabled,
iconRight,
2020-09-13 10:26:54 +02:00
onClick = () => {},
2020-08-08 05:36:57 +02:00
...props
2020-08-07 09:24:01 +02:00
}) {
return (
2020-08-07 09:24:01 +02:00
<button
2020-08-15 10:17:15 +02:00
data-tip={tooltip}
data-effect="solid"
data-for={tooltipId}
2020-08-07 09:24:01 +02:00
type={type}
className={classNames(styles.button, className, {
2020-08-09 08:48:43 +02:00
[styles.large]: size === 'large',
2020-08-09 12:04:48 +02:00
[styles.small]: size === 'small',
[styles.xsmall]: size === 'xsmall',
[styles.action]: variant === 'action',
[styles.danger]: variant === 'danger',
[styles.light]: variant === 'light',
2020-09-26 07:31:18 +02:00
[styles.iconRight]: iconRight,
2020-08-07 09:24:01 +02:00
})}
2020-09-13 10:26:54 +02:00
disabled={disabled}
onClick={!disabled ? onClick : null}
2020-08-08 05:36:57 +02:00
{...props}
2020-08-07 09:24:01 +02:00
>
2020-09-26 07:31:18 +02:00
{icon && <Icon className={styles.icon} icon={icon} size={size} />}
2020-09-26 08:38:28 +02:00
{children && <div className={styles.label}>{children}</div>}
2020-08-15 10:17:15 +02:00
{tooltip && <ReactTooltip id={tooltipId}>{tooltip}</ReactTooltip>}
</button>
);
}
Button.propTypes = {
type: PropTypes.oneOf(['button', 'submit', 'reset']),
icon: PropTypes.node,
size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
variant: PropTypes.oneOf(['action', 'danger', 'light']),
children: PropTypes.node,
className: PropTypes.string,
tooltip: PropTypes.node,
tooltipId: PropTypes.string,
disabled: PropTypes.bool,
iconRight: PropTypes.bool,
onClick: PropTypes.func,
};
export default Button;