Avatar + Badge
Use the Avatar + Badge Pattern to complement the graphical representation that the Avatar provides with a short subtle message or indication for an alert or notification.
The Avatar + Badge Pattern comes with the styling flexibility provided by the Avatar and Badge that constitute its layout.
The Avatar + Badge Pattern supports the same sizes that the Avatar does:
- Large - Suitable for profile pages
- Medium - Appropriate for custom menus and visualizations
- Small - Easily embedded in a contact list and similar repetitive scenarios
The Badge comes positioned in one of the four corners of the Avatar as shown below.
- Bottom Left
- Bottom Right
- Top Left
- Top Right
Our community is active and always welcoming to new ideas.