Skip to content

Description of Styled Buttons (TStyledGraphicButton and TStyledButton)

TStyledGraphicButton, TStyledButton are designed to expand Button UI styles to break the limits of classic TButton, TBitBtn and TSpeedButton provided in Delphi.

List of Styled Button Components:

ComponentDescription
OK_BUTTON_GRAPH_128.pngTStyledGraphicButton is a "pure" Graphic Button with Styles (eg. Classic, Bootstrap, Angular, Basic-Color, SVG-Color) with support of ImageList, Action and full configuration of five states: Normal, Pressed, Selected, Hot and Disabled. You can use it also into a TVirtualList component.
OK_BUTTON_128.pngTStyledButton is classic "button control" with Styles (eg. Classic, Bootstrap, Angular, Basic-Color, SVG-Color) with support of ImageList, Action and full configuration of five states: Normal, Pressed, Selected, Hot and Disabled, plus Focus and TabStop support. You can easily replace all of your TButton components.
OK_SPEEDBUTTON_128.pngTStyledSpeedButton derives from TStyledGraphicButton, and introduce Layout, Margin and Spacing properties, to control Drawing (Icon and Caption) as a standard TSpeedButton. You can also use Glyph and NumGlyphs.
OK_BITBTN_128.pngTStyledBitBtn derives from TStyledButton, and introduce Layout, Margin and Spacing properties, to control Drawing (Icon and Caption) as a standard TBitBtn. You can also use Glyph and NumGlyphs.

The Button Styles defined are not affected by VCLStyles and are also visibile on a "non styled" Windows application, so you can have more than a single Button styled also using VCLStyles. You can build rectangular or rounded or ellipsis/circle button as you prefer.

You can build Rectangular, Rounded or RoundRect or Ellipsis/Circle button as you prefer.

using only three elements you can setup your Button in a very simple way:

  • StyleFamily: the main attribute for Styled Button
  • StyleClass: a collection of predefined button style
  • Style Appearance: eg.Normal or Outline

Component editor for TStyledGraphicButton and StyledButton:

To simplify use of the Styled Buttons, there is a useful "Component Editor" to select three values that defines Button Style:

List of available StyleFamily

Control the default rendering styles for any Styled Buttons

It's possible to redefine at global application level the default Drawing styles for any Components, adding some line in your project file. For Example:

Add those units in uses of dpr:

Pascal
  Vcl.StyledButton,
  Vcl.ButtonStylesAttributes,

Add those lines after Application.Initialize in dpr code:

Pascal
  TStyledButton.RegisterDefaultRenderingStyle(btRounded);

You can also use a Family/Class/Appearance of any type, for example:

Pascal
TStyledButton.RegisterDefaultRenderingStyle(btRoundRect, BOOTSTRAP_FAMILY, btn_primary, BOOTSTRAP_NORMAL);

You can also use Interposer Unit (Vcl.StyledComponentsHooks.pas) to easily change all Buttons of your application.

Component editor for TStyledGraphicButton and StyledButton

In this picture the Component Editor to select "Boostrap" styles: Style Appearance are Normal and Outline

StyledButtonComponentEditorBootstrap.jpg

In this picture, the Component Editor to select "AngularUI" styles: Style Appearance are Flat, Raised, Basic, Stroked

StyledButtonComponentEditorAngular.jpg

In this picture, the Component Editor to select "Classic" styles: Style Appearance are Normal and Outline

StyledButtonComponentEditor.jpg

In this picture, the Component Editor to select "SVG-Color" styles: Style Appearance are Normal and Outline

StyledButtonComponentEditorSVG.jpg

Demo: Buttons

In the Folder Demos\DelphiVersion\ you can Build StyledComponentsDemo to see how it works.

StyledButtonDemoBootstrap.jpg

In the demo you can test many different ways to obtain Styled Button, Icon, FAB...

StyledButtonDemoAngular.jpg

Demo: StyledButton In ControlList

You can see how to use StyledGraphicButton into a ControlList (only for D10.4+)

StyledButtonInControlListDemo.jpg

Released under Apache License, Version 2.0.