How to create a generic button?

Question

React

How to create a universal button component, if visually it is more or less similar to other buttons, but when clicked, it does different functionality?
How to do this if you can not put an event handler on the component? I see the only way out
<Button color={"inherit"}/>

<div onClick={() => {
     toggleAdd(!open)
     setUser("")
     setPhone("")
}}>
     <Button color={"inherit"}/>
</div>

But when completing the TK, they said that it’s better not to do this, and I forgot to ask why ...
The button looks like this

export const Button = ({phone, text, color, textColor, border}) => {
  return (
    <>
      {phone ? (
        <a className="phone" href={`tel:${phone}`} ><img src="./Assets/Phone.svg" alt="" /></a>
      ):(
        <button 
          className="submit" 
          style={{
            background: color,
            color: textColor,
            border: border,
          }}
        >
          {text}
        </button>
      )}
    </>
  )
}

Answer 1

How to create a universal button component, if visually it is more or less similar to other buttons, but when clicked, it does different functionality?
How to do this if you can not put an event handler on the component?

Firstly, inlining styles is bad manners, you should have been told this. Want to make a different button design - use clsxand pass styles through className inside the component through props

<Button className="button-any">Какой-то текст</Button>

And inside the Button takes a className where you propagate it, inside the button you have {children}

How to do this if you can not put an event handler on the component?

Who said? According to the principles of SOLID, your component should not know about complex logic, so you create an onClickHandler inside the component, in which you propagate a function from the parent that already executes the logic.
To make it more clear how to create components - here is a pretty good article - https://habr.com/ru/company/yandex/blog/560194/

Answer 2

I don't understand why you need to swap the link with the button, what's the point?
I understand you want to make the button one but for different purposes, but it’s not very good to do it in my opinion

//css
.submit.myStyles1 {
}
.submit.myStyles2 {
}
.submit.myStyles3 {
}

const myfunction1 = () => {}
const myfunction2 = () => {}


const PhoneBTN = ({phone}) => (
  <a className="phone" href={`tel:${phone}`}>
    <img src="./Assets/Phone.svg" alt="" />
  </a>
)

const Button = ({type,text}) => {
  
  return (
    type === "phone" ? 
    <PhoneBTN {...{phone:text}} onClick={myfunction1}/>: 
    <button className="submit myStyles" onClick={myfunction2}>{text}</button> 
  )
} 

const render = () => (
  <Button {...{type:"phone",text:""}}/>
)