Styled Buttons Examples

This page shows the look of the styled buttons (TStyledButton, TStyledGraphicButton, TStyledSpeedButton, TStyledBitBtn) in the families and shapes of the library. To try them, build the demo StyledComponentsDemo in the folder Demos\Delphi<version>\ (all the forms of the demo are embedded in the main form: see Main Demo).

Styled Buttons page (Family, Class & Appearance Demo)

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

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

Control List page (Delphi 11+)

A simple demo to show how to use TStyledGraphicButton into a TControlList

Styled Buttons with VCL Styles page (StyledButtonVCLStylesDemo, Delphi 10.4+)

A simple demo to show how a StyledButton with "Classic" Family is compatible with VCL Styles

The buttons of the Angular Material 3 families (Text, Elevated, Outlined, Filled, Tonal) are described in Angular Material 3 families.

Explore a variety of buttons with different styles and types showcased on this page, using the properties StyleFamily, StyleClass, StyleAppearance, StyleDrawType.

`StyleFamily="Classic"`

Style Properties	StyleDrawType `btRect`	StyleDrawType `btRoundRect`	StyleDrawType `btRounded`
`StyleClass=Windows` `StyleAppearance=Normal`
`StyleClass=Amakrits` `StyleAppearance=Normal`
`StyleClass=Coral` `StyleAppearance=Normal`
`StyleClass=Ruby Graphite` `StyleAppearance=Normal`

`StyleFamily="Bootstrap"`

Style Properties	StyleDrawType `btRect`	StyleDrawType `btRoundRect`	StyleDrawType `btRounded`
`StyleClass=Primary` `StyleAppearance=Normal`
`StyleClass=Success` `StyleAppearance=Normal`
`StyleClass=Warning` `StyleAppearance=Normal`
`StyleClass=Danger` `StyleAppearance=Normal`

`StyleFamily="Angular-Light"`

Style Properties	StyleDrawType `btRect`	StyleDrawType `btRoundRect`	StyleDrawType `btRounded`
`StyleClass=Indigo` `StyleAppearance=Flat`
`StyleClass=DeepPurple` `StyleAppearance=Flat`
`StyleClass=Amber` `StyleAppearance=Flat`
`StyleClass=Warn` `StyleAppearance=Flat`

`StyleFamily="Angular-Dark"`

Style Properties	StyleDrawType `btRect`	StyleDrawType `btRoundRect`	StyleDrawType `btRounded`
`StyleClass=Blue-gray` `StyleAppearance=Flat`
`StyleClass=Purple` `StyleAppearance=Flat`
`StyleClass=Green` `StyleAppearance=Flat`
`StyleClass=Warn` `StyleAppearance=Flat`

`StyleFamily="Basic-Colors"`

Style Properties	StyleDrawType `btRect`	StyleDrawType `btRoundRect`	StyleDrawType `btRounded`
`StyleClass=clGreen` `StyleAppearance=Normal`
`StyleClass=clPink` `StyleAppearance=Normal`
`StyleClass=clAquamarine` `StyleAppearance=Normal`
`StyleClass=clBrown` `StyleAppearance=Normal`

`StyleFamily="SVG-Colors"`

Style Properties	StyleDrawType `btRect`	StyleDrawType `btRoundRect`	StyleDrawType `btRounded`
`StyleClass=Aqua` `StyleAppearance=Normal`
`StyleClass=Lightsalmon` `StyleAppearance=Normal`
`StyleClass=Yellow` `StyleAppearance=Normal`
`StyleClass=Yellowgreen` `StyleAppearance=Normal`

Styled Buttons Examples ​

StyleFamily="Classic" ​

StyleFamily="Bootstrap" ​

StyleFamily="Angular-Light" ​

StyleFamily="Angular-Dark" ​

StyleFamily="Basic-Colors" ​

StyleFamily="SVG-Colors" ​

See also ​