Skip to content
Wappler Docs
Start Trial
Open tour in Wappler

Badge — Reference

Reference · Advanced · Framework7 8

Badge settings and behavior. Settings include Badge, Text Color, Badge Color.

Badge

Section titled “Badge”

Badge settings and events. Select the component in App Structure to find these controls in Properties.

Badge Properties

Section titled “Badge Properties”
Name Description
BadgeBadge text content. Sets the text displayed inside the badge. Keep badge labels short (counts, statuses) so they don't dominate the UI. Bootstrap docs: Badge
Text ColorOptions: Default, Red (text-color-red), Green (text-color-green), Blue (text-color-blue), Pink (text-color-pink), Yellow (text-color-yellow), Orange (text-color-orange), Purple (text-color-purple), Deep Purple (text-color-deeppurple), Light Blue (text-color-lightblue), Teal (text-color-teal), Lime (text-color-lime), Deep Orange (text-color-deeporange), Gray (text-color-gray), White (text-color-white), Black (text-color-black) Default: "".
Badge ColorOptions: Default, Red (color-red), Green (color-green), Blue (color-blue), Pink (color-pink), Yellow (color-yellow), Orange (color-orange), Purple (color-purple), Deep Purple (color-deeppurple), Light Blue (color-lightblue), Teal (color-teal), Lime (color-lime), Deep Orange (color-deeporange), Gray (color-gray), White (color-white), Black (color-black) Default: "".