MUI V5: Badge (for notification icons + more)

In this video we go over the Badge component! This Material UI V5 component is great for anyone looking for notifications icon in React, or to spice up their avatar profile pictures with online / busy / away icons.

Join our coding Discord:
  / discord  

LINKS
SX Prop:    • MUI V5: The SX Prop  
Material UI Getting Started Guide: https://mui.com/getting-started/insta...
MUI V5 Badge Example: https://mui.com/components/badges/
MUI V5 API: https://mui.com/components/avatars/
MUI V5 Avatar Example: https://mui.com/components/avatars/

TIMESTAMPS
0:00 Intro
0:40 Basic badge example, color and badgeContent prop
2:53 Advanced custom CSS / Customization
3:40 Badge visibility (invisible prop)
4:20 showZero prop for hiding the badge when the badge content is 0
4:53 max prop for truncating large badge content values
5:20 dot prop, and example with MUI V5 Avatar
5:55 overlap prop for circular children
6:45 Badge alignment (top right, top left, bottom right, bottom left)
7:25 Summary and remaining props

Follow me on Social Media:
  / sistillianthony  
  / anthonysistilli