TStyledBitBtn - Technical Reference

Overview

TStyledBitBtn is a styled button component designed for backward compatibility with TBitBtn. It extends TStyledButton with Layout, Margin, Spacing, Kind, and Glyph properties for legacy compatibility.

Class Hierarchy

TWinControl
  └─ TCustomStyledButton
      └─ TStyledButton
          └─ TStyledBitBtn

Unit

Vcl.StyledButton

Description

TStyledBitBtn provides full compatibility with the standard VCL TBitBtn while adding modern styling capabilities. It includes all TBitBtn properties (Kind, Layout, Margin, Spacing, Glyph) plus enhanced styling options.

This component is recommended when migrating existing code that uses TBitBtn's kind-based buttons (OK, Cancel, Yes, No, etc.) and glyph positioning.

Key Features

• TBitBtn compatibility: Kind, Layout, Margin, Spacing, Glyph properties
• Predefined buttons: Kind property for OK, Cancel, Yes, No, Help, etc.
• All TStyledButton features: Focus support, keyboard navigation, styling
• Automatic icons: Glyphs automatically assigned based on Kind
• Modal dialogs: ModalResult automatically set based on Kind

Additional Properties (vs TStyledButton)

TBitBtn Compatibility Properties

Property	Type	Description
Kind	TBitBtnKind	Predefined button type (bkOK, bkCancel, bkYes, bkNo, bkClose, bkAbort, bkRetry, bkIgnore, bkAll, bkHelp, bkCustom)
Layout	TButtonLayout	Position of glyph relative to caption (blGlyphLeft, blGlyphRight, blGlyphTop, blGlyphBottom)
Margin	Integer	Margin between button edge and glyph+caption (default: -1 = auto)
Spacing	Integer	Space between glyph and caption (default: 0)
Glyph	TBitmap	Bitmap glyph (legacy, not DPI-aware)
NumGlyphs	TNumGlyphs	Number of images in glyph bitmap (1-4) for different states

Kind Property Values

Kind	Caption	ModalResult	Default Glyph
bkOK	OK	mrOk	Checkmark
bkCancel	Cancel	mrCancel	X mark
bkYes	Yes	mrYes	Checkmark
bkNo	No	mrNo	X mark
bkClose	Close	mrClose	X mark
bkAbort	Abort	mrAbort	X mark
bkRetry	Retry	mrRetry	Circular arrow
bkIgnore	Ignore	mrIgnore	Forward arrow
bkAll	All	mrAll	Double checkmark
bkHelp	Help	mrNone	Question mark
bkCustom	(custom)	mrNone	None

Usage Examples

Basic OK Button

var
  Btn: TStyledBitBtn;
begin
  Btn := TStyledBitBtn.CreateStyled(Self,
    BOOTSTRAP_FAMILY,
    btn_success,
    BOOTSTRAP_NORMAL);
  Btn.Parent := Self;
  Btn.Kind := bkOK;  // Automatically sets Caption, ModalResult, and Glyph
  Btn.Default := True;
end;

Custom Button with Glyph

Btn := TStyledBitBtn.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_primary,
  BOOTSTRAP_NORMAL);
Btn.Parent := Self;
Btn.Kind := bkCustom;
Btn.Caption := 'Save';
Btn.Glyph.LoadFromFile('save.bmp');
Btn.Layout := blGlyphLeft;
Btn.Margin := 4;
Btn.Spacing := 4;

Dialog Buttons with Styling

// OK Button
BtnOK := TStyledBitBtn.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_success,
  BOOTSTRAP_NORMAL);
BtnOK.Parent := Self;
BtnOK.Kind := bkOK;
BtnOK.Default := True;
BtnOK.StyleDrawType := btRounded;

// Cancel Button
BtnCancel := TStyledBitBtn.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_secondary,
  BOOTSTRAP_NORMAL);
BtnCancel.Parent := Self;
BtnCancel.Kind := bkCancel;
BtnCancel.Cancel := True;
BtnCancel.StyleDrawType := btRounded;

Using ImageList Instead of Glyph

// Modern approach using ImageList (DPI-aware)
Btn := TStyledBitBtn.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_primary,
  BOOTSTRAP_NORMAL);
Btn.Parent := Self;
Btn.Kind := bkCustom;
Btn.Caption := 'Print';
Btn.Images := ImageList1;
Btn.ImageIndex := 5;  // Printer icon
Btn.Layout := blGlyphLeft;  // Still works with ImageList
Btn.Spacing := 4;

Help Button

BtnHelp := TStyledBitBtn.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_info,
  BOOTSTRAP_NORMAL);
BtnHelp.Parent := Self;
BtnHelp.Kind := bkHelp;
BtnHelp.OnClick := ShowHelpClick;
// ModalResult is mrNone for Help buttons

Migration from TBitBtn

// Old code:
// var
//   BitBtn1: TBitBtn;

// New code:
var
  BitBtn1: TStyledBitBtn;

// All TBitBtn properties are compatible!
// Plus modern styling:
BitBtn1.StyleFamily := BOOTSTRAP_FAMILY;
BitBtn1.StyleDrawType := btRounded;

Automatic Styling by Kind

When using StyleFamily families like Bootstrap or Angular, buttons automatically style based on Kind:

Btn.StyleFamily := BOOTSTRAP_FAMILY;
Btn.StyleAppearance := BOOTSTRAP_NORMAL;

// Kind automatically determines StyleClass:
Btn.Kind := bkOK;      // Uses btn_success (green)
Btn.Kind := bkYes;     // Uses btn_success (green)
Btn.Kind := bkCancel;  // Uses btn_secondary (gray)
Btn.Kind := bkNo;      // Uses btn_danger (red)
Btn.Kind := bkHelp;    // Uses btn_info (blue)

Overriding Kind Defaults

Btn := TStyledBitBtn.Create(Self);
Btn.Kind := bkOK;  // Sets defaults

// Override any property after setting Kind:
Btn.Caption := 'Confirm';  // Custom caption
Btn.ModalResult := mrYes;  // Custom modal result
Btn.Glyph := CustomBitmap; // Custom glyph

Important Notes

• Kind Sets Defaults: Setting Kind automatically assigns Caption, ModalResult, and Glyph
• Override After Kind: Set Kind first, then override specific properties
• Focus Support: Unlike TStyledSpeedButton, TStyledBitBtn can receive focus
• Glyph vs ImageList: Prefer ImageList for DPI-aware scaling
• Default/Cancel: Can be designated as form's default or cancel button
• TabStop: Participates in tab order navigation

See Also

• TStyledButton - Base windowed styled button
• TStyledSpeedButton - TSpeedButton-compatible styled button
• TStyledGraphicButton - Lightweight graphic button