Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 2x 2x | import React, { CSSProperties } from 'react';
import Icon from '../Icon/Icon';
import { IconName } from '../Icon/icons';
import { Size } from '../Size';
import './styles.scss';
import { ButtonBase, SxProps } from '@mui/material';
export type ButtonPriority = 'primary' | 'secondary' | 'ghost';
export type ButtonType = 'productive' | 'passive' | 'destructive';
export interface Props {
onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
label?: string;
type?: ButtonType;
priority?: ButtonPriority;
size?: Size;
disabled?: boolean;
icon?: IconName;
rightIcon?: IconName;
processing?: boolean;
id?: string;
className?: string;
style?: CSSProperties;
sx?: SxProps;
}
export default function Button(props: Props): JSX.Element {
const {
onClick,
label,
type = 'productive',
priority = 'primary',
size = 'small',
disabled,
icon,
rightIcon,
processing,
id,
className,
style,
sx,
} = props;
return (
<ButtonBase
id={id}
onClick={onClick}
className={`button ${type}-${priority} button--${size} ${type}-${priority}--${size} ${
icon && !processing ? 'button-with-icon' : ''
} ${rightIcon && !processing ? 'button-with-right-icon' : ''}
${!label ? 'button-no-label' : ''} ${className ?? ''}`}
disabled={disabled}
style={style}
sx={[
{
'& path': { fill: 'currentColor' },
},
...(Array.isArray(sx) ? sx : [sx]),
]}
>
{processing && <Icon name='spinner' size={size} className='icon-spinner' />}
{!processing && icon && <Icon name={icon} size={size} />}
{!processing && !!label && label}
{!processing && rightIcon && <Icon name={rightIcon} size={size} className='icon-right' />}
</ButtonBase>
);
}
|