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

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.