mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-13 13:29:20 -05:00
4f838ccacf
[web] BS5 share modal GitOrigin-RevId: 40a33e06eab720b568d31aefa021682535b6934e
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { forwardRef } from 'react'
|
|
import classNames from 'classnames'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import Button from './button'
|
|
import type { IconButtonProps } from '@/features/ui/components/types/icon-button-props'
|
|
|
|
const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
|
|
(
|
|
{ accessibilityLabel, icon, isLoading = false, size, className, ...props },
|
|
ref
|
|
) => {
|
|
const iconButtonClassName = classNames(className, {
|
|
'icon-button': !size,
|
|
'icon-button-small': size === 'sm',
|
|
'icon-button-large': size === 'lg',
|
|
})
|
|
const iconSizeClassName = size === 'lg' ? 'icon-large' : 'icon-small'
|
|
const materialIconClassName = classNames(iconSizeClassName, {
|
|
'button-content-hidden': isLoading,
|
|
})
|
|
|
|
return (
|
|
<Button
|
|
className={iconButtonClassName}
|
|
isLoading={isLoading}
|
|
aria-label={accessibilityLabel}
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<MaterialIcon className={materialIconClassName} type={icon} />
|
|
</Button>
|
|
)
|
|
}
|
|
)
|
|
IconButton.displayName = 'IconButton'
|
|
|
|
export default IconButton
|