🔘 Button

Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

• Dialogs
• Modal windows
• Forms
• Cards
• Toolbars

By default, the text displayed inside the Component is using Qaterial.Style.TextType.ButtonsTypography.

Flat Button

In Qaterial, FlatButtons are just Highlighted Text with Ripple effect

Outlined Button

OutlineButtons stand as FlatButtons whose area is delimited by a thin line. When clicked accentRipple effect is displayed :

Raised Button

RaisedButtons are non-flat highlighted Buttons. Which means that their main color is Qaterial.Style.accentColor.

Round Button

RoundButtons are usually used as Icon Buttons but can also displayed text :

App Bar Button

AppBarButtons inherit RoundButtons but own a smaller padding :

Advanced Use : RawMaterialButton

Every Qaterial Buttons are made from this Component. Inherited from QtQuick.Templates Button it owns some new properties as :

Debug Property :

• drawline: bool allowing to see Qaterial.DebugRectangle filling the Button and his background. (default: false)

Appearance Properties :

• outlined: bool changing the appearance, true for OutlineButton (default: false)
• radius: background and ripple effect radius (default: 4)
• elevation: double creating the layer effect : Qaterial.ElevationEffect (default: depends on flat, down and hovered)

Color Properties :

• foregroundColor: icon’s color(default: depends on enabled, flat and highlighted)
• backgroundColor: background’s color (default: depends on enabled, flat, outlined, pressed and highlighted)
• rippleColor: Ripple’s color (default: depends on accentRipple and flat)
• outlinedColor: background’s border color (default: depends on outlined, enabled and pressed)
• colorReversed: bool which can reverse foregroundColor

Ripple Properties :

• clipRipple: bool enabling Ripple’s layer (default: true)
• forceRipple: bool forcing Ripple’s active (default: false)
• accentRipple: bool changing Ripple’s color (default: false)