How to make mui avatar clickable in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To mui avatar clickable in React js, You have to use mui avatar onClick attribute where you can define what you want to do on the click of avatar. Thats how you can make clickable mui avatar.

Today, I am going to show you, how to make mui avatar clickable in react js.

Installation

Install the following packages to make mui avatar clickable in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

MUI material mui avatar with border example.

The below code is an example of make mui avatar clickable using this code onClick.

Here, I’m showing alert "Avatar Clicked" on the click on avatar.

App.js

import * as React from "react";
import Avatar from "@mui/material/Avatar";

export default function BackgroundLetterAvatars() {
  return (
    <div>
      <Avatar
        onClick={() => alert("Avatar Clicked")}
        sx={{ bgcolor: "#AE58EF" }}
      >
        G
      </Avatar>
    </div>
  );
}

In the above code example, I have used the @mui/material component and make mui avatar clickable.

Here, we are provided code sandbox links for the above program make mui avatar clickable. Then you can use whenever you want and do the changes as per your requirements.

Let’s check the output.

Try it Yourself

All the best 👍