openreplay/frontend/app/components/Session_/Player/Controls/ControlButton.js
2022-06-10 17:11:14 +02:00

35 lines
961 B
JavaScript

import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import stl from './controlButton.module.css';
const ControlButton = ({
label,
icon = '',
disabled=false,
onClick,
count = 0,
hasErrors=false,
active=false,
size = 20,
noLabel,
labelClassName,
containerClassName,
noIcon,
}) => (
<button
className={ cn(stl.controlButton, { [stl.disabled]: disabled, [stl.active]: active }, "relative", containerClassName) }
onClick={ onClick }
id={"control-button-" + label.toLowerCase()}
disabled={disabled}
>
{ count > 0 && <div className={ stl.countLabel }>{ count }</div>}
{ hasErrors && <div className={ stl.errorSymbol } /> }
{!noIcon && <Icon name={ icon } size={size} color="gray-dark"/>}
{!noLabel && <span className={ cn(stl.label, labelClassName) }>{ label }</span>}
</button>
);
ControlButton.displayName = 'ControlButton';
export default ControlButton;