Skip to content

Styled Buttons Examples

In the Folder Demos\StyledButtonsDemo you can see many examples of use of TStyledButton and TStyledGraphicButtons.

Demos\StyledButtonsDemo\DelphiNNN\StyledButtonsDemo.dpr

A simple demo to show the use of Buttons in many different ways...

StyledButtonDemoBootstrap.jpg

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

StyledButtonDemoAngular.jpg

Demos\StyledButtonsDemo\Delphi11+\StyledButtonInControlList

A simple demo to show how to use StyledGraphicButton into a ControlList (only for D11+)

StyledButtonInControlListDemo.jpg

Demos\StyledButtonsDemo\Delphi10_4+\StyledButtonsVCLStyled.dpr

A simple demo to show how StyledButton with "Classic" Family is compatible with VCL Styles (only for D10.4+)

StyledButtonsVCLStyled.jpg

Explore a variety of buttons with different styles and types showcased on this page, using attributes: StyleFamily, StyleClass, StyleAppearance, StyleDrawTipe.

StyleFamily="Classic"

Style
Properties
StyleDrawType
btRect
StyleDrawType
btRoundRect
StyleDrawType
btRounded
StyleClass=Windows
StyleAppearance=Normal
Classic_Normal_Windows_btRectClassic_Normal_Windows_btRoundRectClassic_Normal_Windows_btRounded
StyleClass=Amakrits
StyleAppearance=Normal
Classic_Normal_Amakrits_btRectClassic_Normal_Amakrits_btRoundRectClassic_Normal_Amakrits_btRounded
StyleClass=Coral
StyleAppearance=Normal
Classic_Normal_Coral_btRectClassic_Normal_Coral_btRoundRectClassic_Normal_Coral_btRounded
StyleClass=Ruby_Graphite
StyleAppearance=Normal
Classic_Normal_Ruby_Graphite_btRectClassic_Normal_Ruby_Graphite_btRoundRectClassic_Normal_Ruby_Graphite_btRounded

StyleFamily="Bootstrap"

Style
Properties
StyleDrawType
btRect
StyleDrawType
btRoundRect
StyleDrawType
btRounded
StyleClass=Primary
StyleAppearance=Normal
Bootstrap_Normal_Primary_btRect./Images/Examples/Bootstrap_Normal_Primary_btRoundRectBootstrap_Normal_Primary_btRounded
StyleClass=Success
StyleAppearance=Normal
Bootstrap_Normal_Success_btRect./Images/Examples/Classic_Normal_Success_btRoundRectBootstrap_Normal_Success_btRounded
StyleClass=Warning
StyleAppearance=Normal
Bootstrap_Normal_Warning_btRect./Images/Examples/Classic_Normal_Warning_btRoundRectBootstrap_Normal_Warning_btRounded
StyleClass=Danger
StyleAppearance=Normal
Bootstrap_Normal_Danger_btRect./Images/Examples/Classic_Normal_Danger_btRoundRectBootstrap_Normal_Danger_btRounded

StyleFamily="Angular-Light"

Style
Properties
StyleDrawType
btRect
StyleDrawType
btRoundRect
StyleDrawType
btRounded
StyleClass=Indigo
StyleAppearance=Normal
Angular-Light_Flat_Indigo_btRectAngular-Light_Flat_Indigo_btRoundRectAngular-Light_Flat_Indigo_btRounded
StyleClass=DeepPurple
StyleAppearance=Normal
Angular-Light_Flat_DeepPurple_btRectAngular-Light_Flat_DeepPurple_btRoundRectAngular-Light_Flat_DeepPurple_btRounded
StyleClass=Amber
StyleAppearance=Normal
Angular-Light_Flat_Amber_btRectAngular-Light_Flat_Amber_btRoundRectAngular-Light_Flat_Amber_btRounded
StyleClass=Warn
StyleAppearance=Normal
Angular-Light_Flat_Warn_btRectAngular-Light_Flat_Warn_btRoundRectAngular-Light_Flat_Warn_btRounded

StyleFamily="Angular-Dark"

Style
Properties
StyleDrawType
btRect
StyleDrawType
btRoundRect
StyleDrawType
btRounded
StyleClass=Blue-gray
StyleAppearance=Normal
Angular-Dark_Flat_Blue-gray_btRectAngular-Dark_Flat_Blue-gray_btRoundRectAngular-Dark_Flat_Blue-gray_btRounded
StyleClass=Purple
StyleAppearance=Normal
Angular-Dark_Flat_Purple_btRectAngular-Dark_Flat_Purple_btRoundRectAngular-Dark_Flat_Purple_btRounded
StyleClass=Green
StyleAppearance=Normal
Angular-Dark_Flat_Green_btRectAngular-Dark_Flat_Green_btRoundRectAngular-Dark_Flat_Green_btRounded
StyleClass=Warn
StyleAppearance=Normal
Angular-Dark_Flat_Warn_btRectAngular-Dark_Flat_Warn_btRoundRectAngular-Dark_Flat_Warn_btRounded

StyleFamily="Basic-Colors"

Style
Properties
StyleDrawType
btRect
StyleDrawType
btRoundRect
StyleDrawType
btRounded
StyleClass=clGreen
StyleAppearance=Normal
Basic-Colors_Normal_clGreen_btRectBasic-Colors_Normal_clGreen_btRoundRectBasic-Colors_Normal_clGreen_btRounded
StyleClass=clPink
StyleAppearance=Normal
Basic-Colors_Normal_clPink_btRectBasic-Colors_Normal_clPink_btRoundRectBasic-Colors_Normal_clPink_btRounded
StyleClass=clAcquamarine
StyleAppearance=Normal
Basic-Colors_Normal_clAquamarine_btRectBasic-Colors_Normal_clAquamarine_btRoundRectBasic-Colors_Normal_clAquamarine_btRounded
StyleClass=clBrown
StyleAppearance=Normal
Basic-Colors_Normal_clBrown_btRectBasic-Colors_Normal_clBrown_btRoundRectBasic-Colors_Normal_clBrown_btRounded

StyleFamily="SVG-Colors"

Style
Properties
StyleDrawType
btRect
StyleDrawType
btRoundRect
StyleDrawType
btRounded
StyleClass=Aqua
StyleAppearance=Normal
SVG-Colors_Normal_Aqua_btRectSVG-Colors_Normal_Aqua_btRoundRectSVG-Colors_Normal_Aqua_btRounded
StyleClass=Lightsalmon
StyleAppearance=Normal
SVG-Colors_Normal_Lightsalmon_btRectSVG-Colors_Normal_Lightsalmon_btRoundRectSVG-Colors_Normal_Lightsalmon_btRounded
StyleClass=Yellow
StyleAppearance=Normal
SVG-Colors_Normal_Yellow_btRectSVG-Colors_Normal_Yellow_btRoundRectSVG-Colors_Normal_Yellow_btRounded
StyleClass=Yellowgreen
StyleAppearance=Normal
SVG-Colors_Normal_Yellowgreen_btRectSVG-Colors_Normal_Yellowgreen_btRoundRectSVG-Colors_Normal_Yellowgreen_btRounded

Released under Apache License, Version 2.0.