Angular Material 3 families

The families Angular-M3-Light and Angular-M3-Dark reproduce the buttons of the current Angular Material (Material Design 3), as shown in the Angular Material button page. They are separate families, one for each colour scheme, as Angular-Light and Angular-Dark are for the previous (Material 2) buttons, which are still available.

Light	Dark
Angular-M3-Light	Angular-M3-Dark

StyleClass and StyleAppearance

Both families have a single StyleClass: Basic. In the Angular Material page the variants Basic, Disabled and Link are the same button used as a <button>, disabled, and as an <a>: in a VCL application there is no difference between a button and a link, and Disabled is the Disabled state of the button, so one class is enough. The colours come from the colour scheme, not from the class.

The StyleAppearance values are the five types of the Material 3 button:

StyleAppearance	Description
Text	no container and no border: the lowest emphasis
Elevated	container with the colour of the surface and a thin border (see below)
Outlined	transparent container with a 1 pixel border
Filled	container with the primary colour: the highest emphasis
Tonal	container with the secondary container colour: medium emphasis
Fab	container with the primary container colour and the shadow of the Floating Action Button (3 pixels, 4 on hover)

The default shape of the family is btRounded (the "full corner" pill of Material 3).

Colours

The colours are the ones of the default Angular Material palette (azure). In the Dark family the same roles use the tones of the dark scheme.

Role	Light	Dark
Primary (container of Filled, label of Text, Outlined, Elevated)	#005CBB	#ABC7FF
On primary (label of Filled)	#FFFFFF	#002F65
Secondary container (container of Tonal)	#DAE2F9	#3E4759
On secondary container (label of Tonal)	#3E4759	#DAE2F9
Primary container (container of Fab)	#D7E3FF	#00458F
On primary container (icon and label of Fab)	#001B3F	#D7E3FF
Surface (container of Elevated)	#FAF9FD	#121316
Outline (border of Outlined)	#74777F	#8E9099
Outline variant (not used by the buttons now)	#C4C6D0	#44474E

The states are drawn as in Angular Material:

• Hot (mouse over): the colour of the label over the container at 8%
• Selected (focus): the same at 12%
• Pressed: the state layer (12%) plus the ripple (12%) that Angular keeps visible while the button is held, about 22%
• Disabled: container with the colour of the text at 12% (also the border of Outlined), label at 38%

FAB, Mini FAB, Extended FAB and Icon button

They are not new classes or appearances: you obtain them with the existing properties.

• FAB, Mini FAB, Extended FAB: use the Fab appearance and StyleDrawType = btRoundRect with a StyleRadius of your choice (the radius is a property of the button: 16 for the FAB and the Extended FAB, 12 for the Mini FAB).
• Icon button: Text appearance, StyleDrawType = btEllipse (or btRounded with the same width and height), no caption and an image.

Shadow

In Angular Material the Elevated button has a shadow. In StyledComponents the Elevated appearance draws a soft shadow around the button (2 pixels at rest, 3 pixels on hover, none when disabled), with the surface colour as container (as in the Angular Material tokens) and no border. The shadow is seen only below the button, as in Angular: the top and the sides are unchanged. It is drawn inside the area of the control, so the face of the button is shorter than the control by the size of the shadow (2 pixels): give an Elevated button a little more height than a Filled one. The size of the shadow is chosen by the family (Elevated 2 pixels, 3 on hover; Fab 3 and 4; none when disabled), but it is also a property of the component: StyleShadowSize (-1 = the shadow of the family, 0 = no shadow, greater than zero = that shadow in every state) exists on all the buttons, panels, toolbars, navigators, button groups and category buttons, and works in any family, not only in Angular-M3. See the Shadow (StyleShadowSize) section of the TStyledButton and TStyledPanel pages.

The Fab appearance has the same kind of shadow (3 pixels at rest, 4 on hover, none when disabled); give the FAB a few pixels more than the Material size to keep the face at 56 pixels.

Dialogs

With these families as the buttons set of a Styled TaskDialog (InitializeStyledTaskDialogs or the DialogButtonsFamily property) the style of every button is chosen by its ModalResult: Ok, Yes, Retry, All and similar are Filled; No, Cancel, Abort, Close are Outlined; Help and Ignore are Text.

Example

//Filled button with the Angular Material 3 colours (light scheme)
StyledButton1.StyleFamily := ANGULAR_M3_LIGHT_FAMILY; //'Angular-M3-Light'
StyledButton1.StyleClass := btn_Basic;
StyledButton1.StyleAppearance := FilledAttr;

//A FAB: tonal appearance, round rectangle shape
StyledButton2.StyleFamily := ANGULAR_M3_LIGHT_FAMILY;
StyledButton2.StyleAppearance := TonalAttr;
StyledButton2.StyleDrawType := btRoundRect;
StyledButton2.StyleRadius := 16;

The constants are declared in the unit Vcl.AngularButtonStyles. You can also choose the style with the Component Editor: the families have their own pages.