mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
e18f0817c6
Bootstrap-5 Button component GitOrigin-RevId: 1fb13b7ab2b71403b0236f1f85aec7b9545b34f1
33 lines
941 B
TypeScript
33 lines
941 B
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import Button from './button'
|
|
import type { IconButtonProps } from '@/features/ui/components/types/icon-button-props'
|
|
import classNames from 'classnames'
|
|
|
|
export default function IconButton({
|
|
icon,
|
|
isLoading = false,
|
|
size = 'default',
|
|
...props
|
|
}: IconButtonProps) {
|
|
const { t } = useTranslation()
|
|
|
|
const iconButtonClassName = `icon-button-${size}`
|
|
const iconSizeClassName =
|
|
size === 'large'
|
|
? 'leading-trailing-icon-large'
|
|
: 'leading-trailing-icon-small'
|
|
const materialIconClassName = classNames(iconSizeClassName, {
|
|
'button-content-hidden': isLoading,
|
|
})
|
|
|
|
return (
|
|
<Button className={iconButtonClassName} isLoading={isLoading} {...props}>
|
|
<MaterialIcon
|
|
accessibilityLabel={t('add')}
|
|
className={materialIconClassName}
|
|
type={icon}
|
|
/>
|
|
</Button>
|
|
)
|
|
}
|