StyledButton Examples - EtheaDev/StyledComponents GitHub Wiki

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"

StyleProperties StyleDrawTypebtRect StyleDrawTypebtRoundRect StyleDrawTypebtRounded
StyleClass=WindowsStyleAppearance=Normal Classic_Normal_Windows_btRect Classic_Normal_Windows_btRoundRect Classic_Normal_Windows_btRounded
StyleClass=AmakritsStyleAppearance=Normal Classic_Normal_Amakrits_btRect Classic_Normal_Amakrits_btRoundRect Classic_Normal_Amakrits_btRounded
StyleClass=CoralStyleAppearance=Normal Classic_Normal_Coral_btRect Classic_Normal_Coral_btRoundRect Classic_Normal_Coral_btRounded
StyleClass=Ruby_GraphiteStyleAppearance=Normal Classic_Normal_Ruby_Graphite_btRect Classic_Normal_Ruby_Graphite_btRoundRect Classic_Normal_Ruby_Graphite_btRounded

StyleFamily="Bootstrap"

StyleProperties StyleDrawTypebtRect StyleDrawTypebtRoundRect StyleDrawTypebtRounded
StyleClass=PrimaryStyleAppearance=Normal Bootstrap_Normal_Primary_btRect ./Images/Examples/Bootstrap_Normal_Primary_btRoundRect Bootstrap_Normal_Primary_btRounded
StyleClass=SuccessStyleAppearance=Normal Bootstrap_Normal_Success_btRect ./Images/Examples/Classic_Normal_Success_btRoundRect Bootstrap_Normal_Success_btRounded
StyleClass=WarningStyleAppearance=Normal Bootstrap_Normal_Warning_btRect ./Images/Examples/Classic_Normal_Warning_btRoundRect Bootstrap_Normal_Warning_btRounded
StyleClass=DangerStyleAppearance=Normal Bootstrap_Normal_Danger_btRect ./Images/Examples/Classic_Normal_Danger_btRoundRect Bootstrap_Normal_Danger_btRounded

StyleFamily="Angular-Light"

StyleProperties StyleDrawTypebtRect StyleDrawTypebtRoundRect StyleDrawTypebtRounded
StyleClass=IndigoStyleAppearance=Normal Angular-Light_Flat_Indigo_btRect Angular-Light_Flat_Indigo_btRoundRect Angular-Light_Flat_Indigo_btRounded
StyleClass=DeepPurpleStyleAppearance=Normal Angular-Light_Flat_DeepPurple_btRect Angular-Light_Flat_DeepPurple_btRoundRect Angular-Light_Flat_DeepPurple_btRounded
StyleClass=AmberStyleAppearance=Normal Angular-Light_Flat_Amber_btRect Angular-Light_Flat_Amber_btRoundRect Angular-Light_Flat_Amber_btRounded
StyleClass=WarnStyleAppearance=Normal Angular-Light_Flat_Warn_btRect Angular-Light_Flat_Warn_btRoundRect Angular-Light_Flat_Warn_btRounded

StyleFamily="Angular-Dark"

StyleProperties StyleDrawTypebtRect StyleDrawTypebtRoundRect StyleDrawTypebtRounded
StyleClass=Blue-grayStyleAppearance=Normal Angular-Dark_Flat_Blue-gray_btRect Angular-Dark_Flat_Blue-gray_btRoundRect Angular-Dark_Flat_Blue-gray_btRounded
StyleClass=PurpleStyleAppearance=Normal Angular-Dark_Flat_Purple_btRect Angular-Dark_Flat_Purple_btRoundRect Angular-Dark_Flat_Purple_btRounded
StyleClass=GreenStyleAppearance=Normal Angular-Dark_Flat_Green_btRect Angular-Dark_Flat_Green_btRoundRect Angular-Dark_Flat_Green_btRounded
StyleClass=WarnStyleAppearance=Normal Angular-Dark_Flat_Warn_btRect Angular-Dark_Flat_Warn_btRoundRect Angular-Dark_Flat_Warn_btRounded

StyleFamily="Basic-Colors"

StyleProperties StyleDrawTypebtRect StyleDrawTypebtRoundRect StyleDrawTypebtRounded
StyleClass=clGreenStyleAppearance=Normal Basic-Colors_Normal_clGreen_btRect Basic-Colors_Normal_clGreen_btRoundRect Basic-Colors_Normal_clGreen_btRounded
StyleClass=clPinkStyleAppearance=Normal Basic-Colors_Normal_clPink_btRect Basic-Colors_Normal_clPink_btRoundRect Basic-Colors_Normal_clPink_btRounded
StyleClass=clAcquamarineStyleAppearance=Normal Basic-Colors_Normal_clAquamarine_btRect Basic-Colors_Normal_clAquamarine_btRoundRect Basic-Colors_Normal_clAquamarine_btRounded
StyleClass=clBrownStyleAppearance=Normal Basic-Colors_Normal_clBrown_btRect Basic-Colors_Normal_clBrown_btRoundRect Basic-Colors_Normal_clBrown_btRounded

StyleFamily="SVG-Colors"

StyleProperties StyleDrawTypebtRect StyleDrawTypebtRoundRect StyleDrawTypebtRounded
StyleClass=AquaStyleAppearance=Normal SVG-Colors_Normal_Aqua_btRect SVG-Colors_Normal_Aqua_btRoundRect SVG-Colors_Normal_Aqua_btRounded
StyleClass=LightsalmonStyleAppearance=Normal SVG-Colors_Normal_Lightsalmon_btRect SVG-Colors_Normal_Lightsalmon_btRoundRect SVG-Colors_Normal_Lightsalmon_btRounded
StyleClass=YellowStyleAppearance=Normal SVG-Colors_Normal_Yellow_btRect SVG-Colors_Normal_Yellow_btRoundRect SVG-Colors_Normal_Yellow_btRounded
StyleClass=YellowgreenStyleAppearance=Normal SVG-Colors_Normal_Yellowgreen_btRect SVG-Colors_Normal_Yellowgreen_btRoundRect SVG-Colors_Normal_Yellowgreen_btRounded