Badge / Tag

The Badge / Tag is a small, pill-shaped label that communicates state — Active, Inactive, Pending — with a color-coded background and dot. Lightweight and composable, it adds instant meaning to rows, cards and headers wherever a status needs to stand out.

Pro component

Subscribe to access this component and the full library.

View plans

ActiveInactivePending

YAML source

Preview — full code with PRO

# Badge / Tag — PowerBlocks (PRO)
# The pill shape is the container itself (Radius 999).

- BadgeTag:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      Width: =100
      Height: =26
      Fill: =RGBA(34, 197, 94, 0.15)
      BorderColor: =RGBA(34, 197, 94, 0.4)
      BorderThickness: =1
      RadiusTopLeft: =999
      RadiusTopRight: =999
# … full component definition unlocked with PRO

This is a partial preview. Unlock the full component →

Common use cases

Row status

Append a badge to each gallery row so users read state without opening the record.

Card headers

Mark cards as new, draft or archived with a corner tag.

Filters legend

Reuse the same colour scheme as your filter chips so status reads consistently across the app.

How to use Badge / Tag in Power Apps

1Open the component page — the YAML uses the invariant Power Fx syntax and works in every Power Apps locale.
2Click "Copy YAML" to copy the full component definition to your clipboard.
3In Power Apps Studio, open your screen in the Tree view and paste (Ctrl+V) — the component appears ready to use.
4Rebind the data-driven properties (Items, OnSelect, Fill, Text) to your own data source and theme.

Tip — Map status values to colours in a single lookup so every badge in the app stays consistent if you rename a state.

Related buttons components

Primary Button

Secondary Button

Icon Button

Toggle Visibility Button