Avatar + Badge

    The Avatar + Badge Pattern is commonly used in many digital platforms to represent users and their accomplishments or roles. An Avatar is a small graphical representation of a user, often a profile picture or icon, while a Badge is a small visual element that is used with a short subtle message or indication to represent an achievement, alert or a status.

    The Avatar + Badge Pattern comes with the styling flexibility provided by the Avatar and Badge that constitute its layout.

    Size

    The Avatar + Badge Pattern supports the same sizes 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

    Position

    The Badge comes positioned in one of the four corners of the Avatar as shown below.

    • Bottom Left
    • Bottom Right
    • Top Left
    • Top Right

    Details

    The Avatar + Badge Pattern offers varying levels of details based on the size of the Avatar being used.

    Facepile

    Facepile is a widely used design element in digital platforms that visually represents a group of users or people. It typically displays a set of Avatar components in a compact and aesthetically pleasing format. Notably, Facepile supports the same sizes the Avatar does: Large, Medium and Small.

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.