TStyledButtonGroup - Technical Reference

Overview

TStyledButtonGroup extends TButtonGroup with styled button rendering and additional layout options for button items.

Class Hierarchy

TWinControl
  └─ TButtonGroup
      └─ TStyledButtonGroup

Unit

Vcl.StyledButtonGroup

Description

TStyledButtonGroup maintains full compatibility with TButtonGroup while adding modern styling capabilities, image positioning options, caption alignment, and per-item style customization.

Key Features

• Full TButtonGroup compatibility: All standard properties and events
• Styled button items: StyleFamily/Class/Appearance for each item
• Flexible image positioning: Left, Right, Top, Bottom, Center
• Caption alignment: Left, Center, Right
• Flat appearance option: Modern flat button style
• Per-item styling: Each button can have custom style
• Notification badges: Badge support for button items

Main Properties

Layout Properties

Property	Type	Description
ButtonOptions	TGroupButtonOptions	Layout mode (gboFullSize, gboGroupStyle, gboShowCaptions)
ButtonWidth	Integer	Width of buttons in gboGroupStyle mode
ButtonHeight	Integer	Height of buttons
ImagePosition	TStyledImagePosition	Image position (sipImageLeft, sipImageRight, sipImageTop, sipImageBottom, sipCenter)
CaptionAlignment	TStyledCaptionAlignment	Caption alignment (scaLeft, scaCenter, scaRight)
Flat	Boolean	Flat button appearance

Styling Properties

Property	Type	Description
StyleFamily	TStyledButtonFamily	Default style family for all items
StyleClass	TStyledButtonClass	Default style class for all items
StyleAppearance	TStyledButtonAppearance	Default appearance for all items
StyleDrawType	TStyledButtonDrawType	Button shape
StyleRadius	Integer	Corner radius

Button Items

Property	Type	Description
Items	TGroupButtonItems	Collection of button items
ItemIndex	Integer	Currently selected item index
Images	TCustomImageList	ImageList for button icons

TGroupButtonItem Properties

Each button item can have:

Property	Type	Description
Caption	String	Button caption
ImageIndex	TImageIndex	Image index from ImageList
Hint	String	Hint text
Enabled	Boolean	Enable/disable item
StyleFamily	TStyledButtonFamily	Override group's style family
StyleClass	TStyledButtonClass	Override group's style class
StyleAppearance	TStyledButtonAppearance	Override group's appearance
NotificationBadge	TNotificationBadgeAttributes	Badge configuration

Usage Examples

Basic ButtonGroup

var
  Group: TStyledButtonGroup;
  Item: TGroupButtonItem;
begin
  Group := TStyledButtonGroup.CreateStyled(Self,
    BOOTSTRAP_FAMILY,
    btn_primary,
    BOOTSTRAP_NORMAL);
  Group.Parent := Self;
  Group.Align := alLeft;
  Group.Images := ImageList1;

  Item := Group.Items.Add;
  Item.Caption := 'Home';
  Item.ImageIndex := 0;
end;

ButtonGroup with Image Positioning

Group := TStyledButtonGroup.CreateStyled(Self,
  ANGULAR_LIGHT_FAMILY,
  acl_primary,
  ANGULAR_RAISED);
Group.Parent := Self;
Group.ImagePosition := sipImageTop;  // Image above caption
Group.CaptionAlignment := scaCenter;
Group.ButtonHeight := 80;

Per-Item Custom Styling

Group := TStyledButtonGroup.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_secondary,
  BOOTSTRAP_NORMAL);

// Override specific items
Group.Items[0].StyleClass := btn_primary;  // Blue
Group.Items[1].StyleClass := btn_success;  // Green
Group.Items[2].StyleClass := btn_danger;   // Red

Flat ButtonGroup

Group := TStyledButtonGroup.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_secondary,
  BOOTSTRAP_NORMAL);
Group.Flat := True;
Group.CaptionAlignment := scaLeft;
Group.ImagePosition := sipImageLeft;

See Also

• TStyledCategoryButtons - Categorized button group
• TStyledToolbar - Toolbar with styled buttons