PillButton.tsx

import { Button, type ButtonProps } from '@mui/material'

type PillButtonTone = 'primary' | 'secondary' | 'danger' | 'neutral'

type PillButtonProps = ButtonProps & {
    tone?: PillButtonTone
}

export function PillButton({
    tone = 'primary',
    variant,
    color,
    sx,
    ...props
}: PillButtonProps) {
    const muiVariant =
        variant ??
        (tone === 'danger' || tone === 'neutral' ? 'outlined' : 'contained')
    const muiColor =
        color ??
        (tone === 'danger'
            ? 'error'
            : tone === 'secondary'
              ? 'secondary'
              : 'primary')

    return (
        <Button
            variant={muiVariant}
            color={muiColor}
            sx={[
                { borderRadius: 999 },
                tone === 'neutral' && {
                    color: 'text.primary',
                    borderColor: 'divider',
                    '&:hover': {
                        borderColor: 'text.secondary',
                        bgcolor: 'action.hover',
                    },
                },
                ...(Array.isArray(sx) ? sx : [sx]),
            ]}
            {...props}
        />
    )
}