Skip to content

Button Styles

Michel Michels edited this page Mar 31, 2024 · 4 revisions

All examples use Deep Purple as the Primary Color and Lime as the Secondary/Accent color. Floating Tool Action Buttons are using the 'Settings' material icon.

To use any of these styles, just insert the following setting to your button's tag:

Style="{DynamicResource STYLE_NAME}"

Where STYLE_NAME is the name of the style you want to add.

MaterialDesignRaisedButton

Uses the Primary Mid color scheme.

MaterialDesignRaisedLightButton

This variant changes the color scheme to Primary Light.

MaterialDesignRaisedDarkButton

This variant changes the color scheme to Primary Dark.

MaterialDesignRaisedSecondaryButton

This variant changes the color scheme to Accent.

MaterialDesignFlatButton

MaterialDesignToolButton

MaterialDesignToolForegroundButton

This variant sets the button's foreground color to the same as its parent's foreground color, but is otherwise identical to MaterialDesignToolButton.

MaterialDesignFloatingActionButton

Uses the Primary Mid color scheme

MaterialDesignFloatingActionLightButton

This variant changes the color scheme to Primary Light.

MaterialDesignFloatingActionDarkButton

This variant changes the color scheme to Primary Dark.

MaterialDesignFloatingActionSecondaryButton

This variant changes the color scheme to Accent.

Clone this wiki locally