jiti-meet/react/features/base/components/buttons/QuickActionButton.js

68 lines
1.5 KiB
JavaScript

// @flow
import { makeStyles } from '@material-ui/styles';
import React from 'react';
type Props = {
/**
* Label used for accessibility.
*/
accessibilityLabel: string,
/**
* Additional class name for custom styles.
*/
className: string,
/**
* Children of the component.
*/
children: string | React$Node,
/**
* Click handler.
*/
onClick: Function,
/**
* Data test id.
*/
testId?: string
}
const useStyles = makeStyles(theme => {
return {
button: {
backgroundColor: theme.palette.action01,
color: theme.palette.text01,
borderRadius: `${theme.shape.borderRadius}px`,
...theme.typography.labelBold,
lineHeight: `${theme.typography.labelBold.lineHeight}px`,
padding: '8px 12px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: 0,
'&:hover': {
backgroundColor: theme.palette.action01Hover
}
}
};
});
const QuickActionButton = ({ accessibilityLabel, className, children, onClick, testId }: Props) => {
const styles = useStyles();
return (<button
aria-label = { accessibilityLabel }
className = { `${styles.button} ${className}` }
data-testid = { testId }
onClick = { onClick }>
{children}
</button>);
};
export default QuickActionButton;