Data Display

Classic Badge

Added Jul 7, 2026

Four badge variants (Default, Secondary, Destructive, and Outline) as pill-shaped Label controls. Paste all four and keep whichever variants you need. Inspired by the shadcn/ui Badge component.

BadgeSecondaryDestructiveOutline

CopySnips Live Preview

How to Use

Paste the copied YAML into Power Apps Studio (Ctrl+V). Four Label controls are added: lblBadgeDefault, lblBadgeSecondary, lblBadgeDestructive, and lblBadgeOutline.
Delete whichever variants you do not need.
Change the Text property on each label to display your own content (e.g. ="New", ="Beta", a counter variable, etc.).
Resize the Width if your text is longer or shorter than the default.
The height is fixed at 24px with fully rounded corners (radius 12). Adjust RadiusTopLeft/etc. to change the pill shape.

Problem Solved

Provides ready-styled badge labels matching the shadcn/ui Badge component for use in Power Apps Canvas, covering all four official variants with correct colors, font weight, and pill shape.

Integration

Each badge is a standalone Label control. Bind the Text property to any Power Apps expression: a variable, a collection field, or a computed string. Change Fill/Color to create custom variants.

- grpBadgeDefault:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(15, 23, 42, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =54
      X: =20
      Y: =20
    Children:
      - lblBadgeDefault:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =54
            X: =0
            Y: =0
- grpBadgeSecondary:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(241, 245, 249, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =72
      X: =82
      Y: =20
    Children:
      - lblBadgeSecondary:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =72
            X: =0
            Y: =0
- grpBadgeDestructive:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(239, 68, 68, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =84
      X: =162
      Y: =20
    Children:
      - lblBadgeDestructive:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =84
            X: =0
            Y: =0
- grpBadgeOutline:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(0, 0, 0, 0)
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =62
      X: =254
      Y: =20
    Children:
      - lblBadgeOutline:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =62
            X: =0
            Y: =0

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Classic Badge

How to Use

Problem Solved

Integration

YAML Code

Implementation