Badge
TsgcHTMLComponent_Badge — render a single Bootstrap 5 badge with color, pill shape, an inline icon and a positioned notification-dot mode, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_Badge — render a single Bootstrap 5 badge with color, pill shape, an inline icon and a positioned notification-dot mode, in Delphi, C++ Builder and .NET.
Set the text and color, then read the HTML property — or skip the create/free entirely with the static Build helper.
TsgcHTMLComponent_Badge
A single Bootstrap 5 <span class="badge">
Delphi, C++ Builder, .NET
Call the static Build(text, color, pill) for a quick inline badge, or create the component to also set Icon and Positioned, then read HTML.
uses
sgcHTML_Enums, sgcHTML_Component_Badge;
var
oBadge: TsgcHTMLComponent_Badge;
begin
oBadge := TsgcHTMLComponent_Badge.Create(nil);
try
oBadge.Text := '3';
oBadge.Color := bgDanger;
oBadge.Pill := True;
oBadge.Positioned := True;
WebModule.Response := oBadge.HTML; // <span class="badge bg-danger rounded-pill ...">
finally
oBadge.Free;
end;
end;
// Or the one-line static helper for a simple inline badge:
WebModule.Response := TsgcHTMLComponent_Badge.Build('New', bgSuccess, True);// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Badge.hpp
TsgcHTMLComponent_Badge *oBadge = new TsgcHTMLComponent_Badge(NULL);
try
{
oBadge->Text = "3";
oBadge->Color = bgDanger;
oBadge->Pill = true;
oBadge->Positioned = true;
String html = oBadge->HTML; // <span class="badge bg-danger rounded-pill ...">
}
__finally
{
delete oBadge;
}
// Or the one-line static helper:
String html2 = TsgcHTMLComponent_Badge::Build("New", bgSuccess, true);using esegece.sgcWebSockets;
var badge = new TsgcHTMLComponent_Badge();
badge.Text = "3";
badge.Color = TsgcHTMLBadgeStyle.bgDanger;
badge.Pill = true;
badge.Positioned = true;
string html = badge.HTML; // <span class="badge bg-danger rounded-pill ...">
// Or the one-line static helper:
string html2 = TsgcHTMLComponent_Badge.Build("New", TsgcHTMLBadgeStyle.bgSuccess, true);The members you reach for most often.
Text is the label; Color (TsgcHTMLBadgeStyle: bgPrimary, bgSecondary, bgSuccess, bgDanger, bgWarning, bgInfo, bgLight, bgDark) sets the Bootstrap variant.
Pill switches the badge to the fully-rounded rounded-pill shape.
Icon renders an <i> element (e.g. a Bootstrap Icons class) before the text.
Positioned adds position-absolute top-0 start-100 translate-middle, turning the badge into a notification dot anchored to a position-relative parent.
Build(aText, aColor, aPill) returns the badge HTML directly, with no instance to create or free.
HTML returns a single <span class="badge bg-..."> element, ready to embed inline.
| Online HelpFull API reference and usage guide for this component. | Open | |
| All sgcHTML ComponentsBrowse the full feature matrix of 80+ components. | Open | |
| Download Free TrialThe 30-day trial ships the 60.HTML demo projects. | Open | |
| PricingSingle, Team and Site licenses with full source code. | Open |