WBadge

A WBadge is a short text, often shown against a contrasting background, which is used to convey important information at a glance.

Example
A Simple Badge
source 
#include <Wt/WContainerWidget.h>
#include <Wt/WBadge.h>


auto container = std::make_unique<Wt::WContainerWidget>();
auto badge = container->addWidget(std::make_unique<Wt::WBadge>("A Simple Badge"));

A badge can also be added to any WPushButton or WMenuItem. This is useful to attract the user's attention to a particular button or menu item.

Example
source 
#include <Wt/WContainerWidget.h>
#include <Wt/WBadge.h>
#include <Wt/WCssDecorationStyle.h>
#include <Wt/WPopupMenu.h>
#include <Wt/WPushButton.h>

Wt::WCssDecorationStyle redBadgeStyle;
redBadgeStyle.setBackgroundColor(Wt::WColor(255, 0, 0));

Wt::WCssDecorationStyle yellowBadgeStyle;
yellowBadgeStyle.setBackgroundColor(Wt::WColor(255, 200, 0));
yellowBadgeStyle.setForegroundColor(Wt::WColor(0, 0, 0));

auto container = std::make_unique<Wt::WContainerWidget>();
auto button = container->addWidget(std::make_unique<Wt::WPushButton>("Features"));

auto popupMenu = std::make_unique<Wt::WPopupMenu>();
popupMenu->addItem("Old boring feature");

auto newBadge = std::make_unique<Wt::WBadge>("New");
newBadge->setDecorationStyle(redBadgeStyle);
// Ensure Bootstrap 5 theme does not override our custom style
newBadge->setUseDefaultStyle(false);
popupMenu->addItem("New exciting feature")->setBadge(std::move(newBadge));

auto premiumBadge = std::make_unique<Wt::WBadge>("Premium");
premiumBadge->setDecorationStyle(yellowBadgeStyle);
// Ensure Bootstrap 5 theme does not override our custom style
premiumBadge->setUseDefaultStyle(false);
popupMenu->addItem("Premium feature")->setBadge(std::move(premiumBadge));

button->setMenu(std::move(popupMenu));

auto buttonBadge = std::make_unique<Wt::WBadge>("1");
buttonBadge->setDecorationStyle(redBadgeStyle);
// Ensure Bootstrap 5 theme does not override our custom style
buttonBadge->setUseDefaultStyle(false);
button->setBadge(std::move(buttonBadge));