How to Create a Button in Material UI ?

Material UI provides a simple and effective way to create buttons in React applications. These offer a sleek and responsive user interface element for various interactions.

Installation

// Package containing Material UI components including buttons.
npm install @mui/material

Approach

• Import the Button component from @mui/material and specify the desired variant, color, and onClick handler.
• Choose from contained, outlined, or text button variants based on your design and interaction requirements.
• Adjust button props such as color, size, and disabled state to increase user experience.

Features

• Versatile Button Types: Material UI offers various button types such as contained, outlined, and text buttons to suit different design needs.
• Icon Integration: Buttons can easily integrate icons using Material UI’s icon components, enhancing functionality and visual appeal.
• Customization: Buttons can be customized with props like colour, variant, size, and disabled state to match the application’s design system.
• Event Handling: Buttons support event handling such as onClick, enabling developers to define actions or functions triggered by button clicks.

Example

import React from 'react';
import { Button } from '@mui/material';

function MyButton() {
  return (
    <Button variant="contained" color="primary" onClick={() => alert('Button Clicked')}>
      Click Me
    </Button>
  );
}

export default MyButton;