At a glance

TsgcHTMLComponent_ButtonGroup

A button-group component that emits a Bootstrap 5 btn-group. Add button items, set each one's style and state, then read the HTML property.

Component class

TsgcHTMLComponent_ButtonGroup

Renders

Bootstrap 5 btn-group markup

Family

Navigation & Structure

Languages

Delphi, C++ Builder, .NET

QuickStart

Create it, add buttons, render it

Add button items, set each Text, ButtonStyle and Active flag, pick a Size, then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).

uses
  sgcHTML_Enums, sgcHTML_Component_ButtonGroup;

var
  oGroup: TsgcHTMLComponent_ButtonGroup;
  oBtn: TsgcHTMLButtonItem;
begin
  oGroup := TsgcHTMLComponent_ButtonGroup.Create(nil);
  try
    oGroup.Size := bgsLarge;
    oGroup.AriaLabel := 'View mode';

    oBtn := oGroup.Items.Add;
    oBtn.Text := 'Day';
    oBtn.ButtonStyle := bsOutlinePrimary;
    oBtn.Active := True;

    oBtn := oGroup.Items.Add;
    oBtn.Text := 'Week';
    oBtn.ButtonStyle := bsOutlinePrimary;

    oBtn := oGroup.Items.Add;
    oBtn.Text := 'Month';
    oBtn.ButtonStyle := bsOutlinePrimary;
    oBtn.Disabled := True;

    WebModule.Response := oGroup.HTML;   // Bootstrap btn-group
  finally
    oGroup.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_ButtonGroup.hpp

TsgcHTMLComponent_ButtonGroup *oGroup = new TsgcHTMLComponent_ButtonGroup(NULL);
try
{
  oGroup->Size = bgsLarge;
  oGroup->AriaLabel = "View mode";

  TsgcHTMLButtonItem *oBtn = oGroup->Items->Add();
  oBtn->Text = "Day";
  oBtn->ButtonStyle = bsOutlinePrimary;
  oBtn->Active = true;

  oBtn = oGroup->Items->Add();
  oBtn->Text = "Week";
  oBtn->ButtonStyle = bsOutlinePrimary;

  oBtn = oGroup->Items->Add();
  oBtn->Text = "Month";
  oBtn->ButtonStyle = bsOutlinePrimary;
  oBtn->Disabled = true;

  String html = oGroup->HTML;   // Bootstrap btn-group
}
__finally
{
  delete oGroup;
}

using esegece.sgcWebSockets;

var group = new TsgcHTMLComponent_ButtonGroup();
group.Size = TsgcHTMLButtonGroupSize.bgsLarge;
group.AriaLabel = "View mode";

var btn = group.Items.Add();
btn.Text = "Day";
btn.ButtonStyle = TsgcHTMLButtonStyle.bsOutlinePrimary;
btn.Active = true;

btn = group.Items.Add();
btn.Text = "Week";
btn.ButtonStyle = TsgcHTMLButtonStyle.bsOutlinePrimary;

btn = group.Items.Add();
btn.Text = "Month";
btn.ButtonStyle = TsgcHTMLButtonStyle.bsOutlinePrimary;
btn.Disabled = true;

string html = group.HTML;   // Bootstrap btn-group

Reference

Key properties & methods

The members you reach for most often.

Items

Items is the TsgcHTMLButtonItems collection; Items.Add returns a TsgcHTMLButtonItem with Text, Href, Active, Disabled and ButtonStyle.

Item style

Each item's ButtonStyle (a TsgcHTMLButtonStyle such as bsOutlinePrimary) sets its variant, and BtnClass overrides it with raw classes; a Href renders the item as an anchor instead of a button.

Size & layout

Size picks bgsDefault, bgsSmall or bgsLarge; Vertical stacks the buttons into a btn-group-vertical.

Accessibility

AriaLabel sets the group's aria-label for screen readers; GroupID assigns its element id.

Output

HTML returns the btn-group wrapper and its button / link children — serve it, or assign it to a page template's BodyContent.

Resources

Keep exploring

	All sgcHTML ComponentsBrowse the full feature matrix of 60+ 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

ButtonGroup