Power Apps Modern Badge Control [Complete Guide]

    Do you know what is a Power Apps Modern Badge control and how it works? No worries!

    In this Power Apps tutorial, we will learn everything about Power Apps Modern Badge, its properties, and how to use a Modern Badge Control in Power Apps.

    Apart from that, we will get to know how to enable Power Apps Modern Controls in the Canvas app.

    Also, Read: Power Apps Modern Dropdown Control [Complete Tutorial]

    Power Apps Modern Badge Control

    An informational token called a Power Apps badge that displays brief details like a user’s task indicator. Typically, it offers a quick way to see the notification or vital message without reading a lengthy text.

    The below screenshot represents how the Power Apps Modern Badge control looks like.

    Power Apps Modern Badge
    Power Apps Modern Badge

    Power Apps Modern Badge Properties

    The below list represents all the essential Properties of Power Apps Modern Badge Control.

    PropertyDescription
    ContentThe text which will be shown inside the badge control.
    ContentLanguageDefines the audience’s language (for example, “en-US”).
    DisplayModeThere are three modes:
    Edit – The user can enter the data.
    View – Allows only to display data.
    Disabled – The control is greyed out with disabled mode.
    Appearance There are four types of appearances. Such as:
    Filled:
    Power Apps Badge
    Ghost:
    Power Apps Badge Control
    Outline:
    Power Apps Modern Badge Control
    Tint:
    PowerApps Modern Badge
    ColorThere are eight different badge colors. Such as:
    Brand:
    PowerApps Badge Control
    Danger:
    Power Apps Badge Control Properties
    Important:
    PowerApps Badge Properties
    Informative:
    Power Apps Badge Properties
    Severe:
    Badge in Power Apps
    Subtle:
    Modern Badge in Power Apps
    Success:
    Modern Badge control Power Apps
    Warning:
    Modern Badge control PowerApps
    ShapeThere are three different badge shapes. Such as:
    Circular:
    Badge control Power Apps
    Square:
    Badge control PowerApps
    Rounded:
    Badge PowerApps
    OnChangeActions that will be carried out when the value changes.
    PositionThere are two types of badge positions:
    – Distance between the control’s left side and the screen’s left edge.
    Y – Distance between the top of the control and the top edge of the screen.
    SizeThere are two types of sizes:
    Width – The gap between the control’s left and right sides.
    Height – Distance between the control’s top and bottom.
    VisibleIt defines whether to display or hide the Power Apps Badge control.

    These are all about Power Apps Badge control properties.

    Have a look at: Power Apps Modern Progress Bar [Detailed Guide]

    Add Modern Badge Control in Power Apps

    Now, we will see how to insert a Modern Badge Control in Power Apps.

    We must first activate the “Try out the modern controls” option on the Power Apps Canvas app’s settings page.

    If you don’t enable this option, you won’t be able to see the Modern controls in Power Apps. Follow these steps to enable Power Apps Modern Controls:

    • Sign in to Power Apps with your Microsoft credentials.
    • Create a New Blank Canvas app (Apps -> + New App -> Canvas).
    Add Modern Badge in Power Apps
    Add Modern Badge in Power Apps
    • Provide a unique name for the canvas app (Power Apps Modern Badge Control) -> Choose the Format as Tablet -> Click on Create.
    PowerApps Modern Badge Control
    PowerApps Modern Badge Control
    • Go to Settings (from the top) from the Power Apps Screen -> Select Upcoming features -> Click Preview -> Turn on to Try out the modern controls as shown below.
    • Save and Publish the Power Apps canvas app once.
    Badge control in Power Apps
    Badge control in Power Apps
    • On the Power Apps Screen, expand the + Insert tab (from the top) -> Scroll down, and expand Modern controls -> Select Badge as below.
    • The Power Apps Badge’s default name will be BadgeCanvas1. You can also rename it to suit your needs.
    Modern Badge control in Power Apps
    Modern Badge control in Power Apps
    • Similarly, the Badge’s default content will be “AB“. You can change it by using the Content property:
    Content = "Hello TSinfo Technologies"

    You must need to provide an inverted comma ” “ as shown below.

    Modern Badge Control in PowerApps
    Modern Badge Control in PowerApps

    This is how to add a Modern Badge Control in Power Apps.

    Check out: Power Apps Modern Button Control [Complete Guide]

    How to Use Power Apps Modern Badge Control

    We will discuss how to work with Power Apps Modern Badge control here.

    As you can see the image below represents five different Power Apps badges with various appearances. Let’s explore them one by one.

    Power Apps Modern Badge
    Power Apps Modern Badge

    Reboot Your System:

    Content: "Reboot Your System"
    Appearance: Filled
    Color: Danger
    Shape: Square

    Need Any Help?:

    Content: "Need Any Help?"
    Appearance: Filled
    Color: Brand 
    Shape: Circular

    Reboot Completed:

    Content: "Reboot Completed"
    Appearance: Filled
    Color: Success 
    Shape: Circular

    You Are Saved:

    Content: "You Are Saved!!"
    Appearance: Filled
    Color: Important 
    Shape: Rounded

    Enjoy Power Apps:

    Content: "Enjoy Power Apps"
    Appearance: Filled
    Color: Subtle 
    Shape: Rounded
    • To preview it, first, Save and Publish the app from the top right corner.
    • Click on the Publish this version button.
    Power Apps Badge Examples
    Power Apps Badge Examples
    • Finally, close the Canvas app and then reopen it in Play mode to view it.

    This is how to Use Modern Badge Control in Power Apps.

    Furthermore, you may like some more Power Apps and Dataverse tutorials:

    This Power Apps tutorial explained all the details about Modern Badge Control in Power Apps, its important various properties, and how to use a Power Apps Modern Badge Control with an example.

    Additionally, we learned how to enable Power Apps Modern Controls in the Canvas app.

    Happy Posting!

    >