Badge – Everything you want to know about modern control #2

Introduction to Badge control

Badge control, like the Avatar control, is pretty neat. This is another one of the modern controls that I came to know about it only a few days ago. This control is used to show a content in a mode visual way. This control shows text with some color properties to emphasise the content.

Properties

1. Content - The text/content to show inside the control. The default value is AB
2. Shape - The shape of the badge. There are 3 different options:
   1. 'BadgeCanvas.Shape'.Circular (default value)
   2. 'BadgeCanvas.Shape'.Square
   3. 'BadgeCanvas.Shape'.Rounded

      

3. Appearance - The colors used when an image is not available. There are 3 different options:
   1. 'BadgeCanvas.Appearance'.Tint- Uses the theme of the app to decide the fill color in a faded/tinted form (default value)
   2. 'BadgeCanvas.Appearance'.Outline- Uses the theme of the app to decide the color of the outline/border with no fill
   3. 'BadgeCanvas.Appearance'.Ghost- Has no fill nor border
   4. 'BadgeCanvas.Appearance'.Filled- Uses the theme of the app to decide the fill color

      

4. ThemeColor - The color used to style the border and the fill color of the badge to denote different scenarios. There are several options:
   1. 'BadgeCanvas.ThemeColor'.Brand
   2. 'BadgeCanvas.ThemeColor'.Danger
   3. 'BadgeCanvas.ThemeColor'.Important
   4. 'BadgeCanvas.ThemeColor'.Informative
   5. 'BadgeCanvas.ThemeColor'.Severe
   6. 'BadgeCanvas.ThemeColor'.Subtle
   7. 'BadgeCanvas.ThemeColor'.Success
   8. 'BadgeCanvas.ThemeColor'.Warning

      

Using Badge control

While I haven't used this control yet, I envision using them in pop-ups to visually denote what the pop-up is for e.g. success, warning, etc.

Stay tuned for the remaining modern controls!

To read the official documentation of modern controls, click here.

Recent articles

1. Avatar – Everything you want to know about modern control #1
2. How to use custom sorting in canvas apps
3. How to use Dataverse views to filter related records