Skip to content

Toggle Button Styles

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

All examples use Deep Purple as the Primary Color and Lime as the Secondary/Accent color. Icon is the 'Battery 50' material icon.

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

Style="{DynamicResource STYLE_NAME}"

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

MaterialDesignActionToggleButton

Uses the Primary Mid color scheme.

MaterialDesignActionToggleButton

MaterialDesignActionLightToggleButton

This variant changes the color scheme to Primary Light.

MaterialDesignActionLightToggleButton

MaterialDesignActionDarkToggleButton

This variant changes the color scheme to Primary Dark.

MaterialDesignActionDarkToggleButton

MaterialDesignActionSecondaryToggleButton

This variant changes the color scheme to Accent.

MaterialDesignActionSecondaryToggleButton

MaterialDesignFlatToggleButton

MaterialDesignFlatToggleButton

MaterialDesignFlatPrimaryToggleButton

This variant uses the Primary Mid Background color, instead of the default grey one.

MaterialDesignFlatPrimaryToggleButton

MaterialDesignSwitchToggleButton

Uses the Primary Mid color scheme.

Note: This style completly ignores the toggle button's Content.

MaterialDesignSwitchToggleButton

MaterialDesignHamburgerToggleButton

Note: This style completly ignores the toggle button's Content.

MaterialDesignHamburgerToggleButton

Clone this wiki locally