Badge Components for Power Apps
A badge is a small read-only label that tells the user the state of a record: Open, Overdue, Draft. The Badge family has text badges that differ only in shape and border, plus people components (User Avatar, User Chip and Avatar Group) that show initials taken live from the signed-in user. Reach for a text badge inside a gallery row or next to a form field, and for an avatar in an app header or an "assigned to" column.
Pick a variant
| Component | Plan | What it is for | Settings you can change |
|---|---|---|---|
| Simple Badge | Paid | Square-cornered label with a light tinted background | Badge Text, Text Color, Quick Colors, Background Color (Auto or Custom) |
| Border Badge | Paid | Square-cornered label with a border for extra visibility | Badge Text, Text Color, Quick Colors, Background Color (Auto or Custom) |
| Pills Badge | Paid | Pill-shaped label with fully rounded ends | Badge Text, Text Color, Quick Colors, Background Color (Auto or Custom) |
| Outlined Pills Badge | Paid | Pill with a thin border in the text colour | Badge Text, Text Color, Quick Colors, Background Color (Auto or Custom) |
| User Avatar | Paid | Initials circle for the signed-in user, with an optional presence dot | Microsoft account, Name, Style, Shape, Size, Colour, Presence dot, Status |
| User Chip | Paid | Avatar and name in one pill for app headers and assigned-to rows | Microsoft account, Name, Style, Colour, Presence dot, Status |
| Avatar Group | Paid | Overlapping stack of initials for assignee and shared-with lists | Lead with the signed-in user, Names, Max circles before +N, Size |
Paid means a Components, Ultra, Team or Lifetime plan (pricing). Open the category in the library: Badge.
To copy a variant into Power Apps Studio, follow Getting Started.
After you paste
The text badges are self-contained. Each pastes as one Classic button named btnBadge1 (btnBadge1_1 for Border Badge) with a fixed Text of "Default", and nothing else needs wiring. To show real data, drop the badge into a gallery row and change two properties.
Text property of btnBadge1, reading the status column of the row:
ThisItem.Status
Color property of btnBadge1. The Fill is ColorFade(Self.Color, 80%), so the background follows the text colour on its own:
Switch(ThisItem.Status, "Open", RGBA(22, 101, 52, 1), "Blocked", RGBA(220, 38, 38, 1), RGBA(36, 80, 150, 1))
User Avatar, User Chip and Avatar Group read User().FullName. To show another person, for example the assignee of a gallery row, replace it in the Text property of lblUserAvatarInitials (lblUserChipInitials on the chip) with the same initials formula applied to your column:
With({ n: ThisItem.AssignedTo.DisplayName }, Upper(Left(n, 1) & Mid(n, Find(" ", n & " ") + 1, 1)))
Good to know
- Every Badge component needs Components, Ultra, Team or Lifetime; none is free. Editing the Settings tab needs Ultra, Team or Lifetime. None of them offers Modern YAML and none has an Instructions tab.
- Simple Badge and Pills Badge paste with DisplayMode set to View, so they ignore clicks and hover. Outlined Pills Badge and Border Badge stay in Edit mode and can take an OnSelect.
- Background Color on Auto writes Fill as ColorFade(Self.Color, 80%), so the badge recolours itself when you change Color. Custom writes a fixed RGBA that no longer follows Text Color.
- With Microsoft account switched on, the avatar, the chip and the first circle of Avatar Group use User().FullName, no connector needed. Switched off, the Name you type is pasted as a literal string, and the extra Names in Avatar Group are always literal initials ("AS", "BT"). The presence dot is a fixed colour from the Status setting; to make it live, point the Fill of conUserAvatarPresence (conUserChipPresence on the chip) at your own status field.
- The light and dark toggle in the component header changes the YAML of User Avatar, User Chip and Avatar Group only; the text badges produce the same colours in both themes.
Related
Library: Badge. Related guides: Gallery for the rows badges usually sit in, and Cards.