overleaf/services/web/frontend/js/features/ui/components/bootstrap-5/badge.tsx

28 lines
783 B
TypeScript
Raw Normal View History

import { Badge as BSBadge } from 'react-bootstrap-5'
import { MergeAndOverride } from '../../../../../../types/utils'
import MaterialIcon from '@/shared/components/material-icon'
type BadgeProps = MergeAndOverride<
React.ComponentProps<typeof BSBadge>,
{
prepend?: React.ReactNode
closeBtnProps?: React.ComponentProps<'button'>
}
>
function Badge({ prepend, children, closeBtnProps, ...rest }: BadgeProps) {
return (
<BSBadge {...rest}>
{prepend && <span className="badge-prepend">{prepend}</span>}
{children}
{closeBtnProps && (
<button type="button" className="badge-close" {...closeBtnProps}>
<MaterialIcon className="badge-close-icon" type="close" />
</button>
)}
</BSBadge>
)
}
export default Badge