MUI Buttons - Example & Tutorial

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Contained

Use variant='contained' prop with <Button> component for contained buttons.

Link

---

Text

Use variant='text' prop with <Button> component for buttons with text only.

Link

---

Outlined

Use variant='outlined' prop with <Button> component for outlined buttons.

Link

---

Buttons With Icon and Label

Use startIcon | endIcon prop with <Button> component to add an icon inside a button.

---

Icon Buttons

Use an icon component inside <IconButton> component. For different colors, use color prop with <IconButton> component.

---

Button Sizes

Use size={'small' | 'medium' | 'large'} prop with <Button> component for different sized buttons. To use icon buttons, you need to use size={small | large} prop with <IconButton> component or you can also use fontSize prop with the icons.

---

Button Colors

Use color prop with <Button> component for different colored buttons.

---

Customized Buttons

---

Custom Icon Buttons

Use <CustomIconButton> component to use our custom icon button. You can use all the props of the <Button> component and additionally, we have added default color.

Sizes

Colors

---

Floating Action Button

Use color prop with <Fab> component for different colored Floating Action Button and variant='extended' prop for extended (not round) Floating Action Button.

Circular Variant

Extended Variant

---

Floating Action Button Sizes

Use size={'small' | 'medium' | 'large'} prop for different sizes of Floating Action Buttons.

---