← Back to Index

TFlexFMXAdvancedButton

A powerful button component with Bootstrap-style variants, icon support, HTML text rendering, badge notifications, and comprehensive styling options.

Overview

TFlexFMXAdvancedButton extends the standard FMX button with:

Bootstrap-style button variants (Primary, Secondary, Success, Danger, etc.)
Outline and solid styles
Icon support with tinting and positioning
HTML text rendering (bold, italic, strikethrough, font sizes)
Badge notifications (positioned at top-right)
Button grouping with selection states
Hover and click effects
FlexFMX CSS integration for responsive layouts

Key Properties

ButtonStyle: TFlexFMXButtonStyle
Defines the visual style of the button. Options include:

bsPrimary - Blue primary button
bsSecondary - Gray secondary button
bsSuccess - Green success button
bsDanger - Red danger button
bsWarning - Yellow warning button
bsInfo - Cyan info button
bsLight - Light gray button
bsDark - Dark button
bsLink - Link-style button (transparent)
bsOutline* - Outline variants of above styles

ButtonSize: TFlexFMXButtonSize
Controls the button size: bsSmall (32px), bsDefault (40px), bsLarge (48px)

Text: string
The button's display text.

UseHTMLText: Boolean
When True, enables HTML rendering in the button text.

HTMLText: string
HTML formatted text when UseHTMLText is True. Supports:
- Bold
- Italic
- <s>Strikethrough</s>
- Sized text
-   for line breaks

ImageSettings: TFlexFMXImageSettings
Configuration for button icons:

ImageList - Source image list
ImageIndex - Index of the icon
Position - Icon position (Left, Right, Top, Bottom, Center)
UseTint - Apply color tinting
TintColor - Tint color
ScaleMode - isStretch, isFit, isCrop
Size - Icon size (0 = auto)
Spacing - Space between icon and text
Padding* - Padding around icon

BadgeSettings: TFlexFMXButtonBadgeSettings
Badge notification configuration:

Text - Badge text (empty or "0" hides badge)
BadgeColor - Background color (default: Red)
Position - Badge position (default: bpTopRight)
OffsetX - Horizontal offset (default: 8)
OffsetY - Vertical offset (default: -8)

ButtonLayout: TFlexFMXButtonLayout
Layout mode: blImageAndText, blImageOnly, blTextOnly

GroupName: string
Groups buttons together for radio-button behavior.

StaysDown: Boolean
When True and part of a group, button stays selected when clicked.

FlexFMXCSS: TFlexFMXCSS
CSS classes for responsive layout integration (Bootstrap-like classes).

Usage Examples

Basic Button

Button1.ButtonStyle := bsPrimary;
Button1.Text := 'Click Me';
Button1.ButtonSize := bsDefault;

Button with Icon

Button1.ImageSettings.ImageList := ImageList1;
Button1.ImageSettings.ImageIndex := 0;
Button1.ImageSettings.Position := ipLeft;
Button1.ImageSettings.UseTint := True;

Button with HTML Text

Button1.UseHTMLText := True;
Button1.HTMLText := '<b>Bold</b> text with <i>italic</i>';

Button with Badge

Button1.BadgeSettings.Text := '5';
Button1.BadgeSettings.BadgeColor := TAlphaColors.Red;

Button Group

Button1.GroupName := 'MyGroup';
Button1.StaysDown := True;
Button2.GroupName := 'MyGroup';
Button2.StaysDown := True;

Image-Only Button

Button1.ButtonLayout := blImageOnly;
Button1.ImageSettings.ImageList := ImageList1;
Button1.ImageSettings.ImageIndex := 0;
Button1.ImageSettings.Position := ipCenter;
Button1.ImageSettings.ScaleMode := isFit;

Events

Event	Description
OnClick	Fired when button is clicked

Notes

Icons are automatically tinted to match button text color when UseTint is enabled
Badge automatically hides when text is empty or "0"
Button groups support single-selection behavior similar to radio buttons
HTML text supports word wrapping with state preservation across lines
Images maintain aspect ratio and center when using isFit scale mode
Supports both design-time and runtime CSS configuration via FlexFMXCSS

← Back to Index