Working with buttons

Material-UI buttons are very similar to HTML button elements. The difference is that they're React components that work well with other aspects of Material-UI, such as theming and layout. Let's look at an example that renders different styles of buttons:

 
const buttonStyle = { margin: 10 };
 
function toggleColor(setter, value) {
  setter(value === "default" ? "primary" : "default");
}
 
export default function App() {
  const [contained, setContained] = useState("default");
  const [text, setText] = useState("default");
  const [outlined, setOutlined] = useState("default");
  const [icon, setIcon] = useState("default");
 
  return (
    <Grid container>
      <Grid
        item
       &...