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
Watch video MUI V5: Badge (for notification icons + more) online without registration, duration hours minute second in high quality. This video was added by user Anthony Sistilli 12 April 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,084 once and liked it 99 people.