Buttons

A button initiates an instantaneous action when people tap it.

Styles

A button can change its visual style based on size, color, and shape. The styles available for you to use can be found here. A Button can have several different styles:

By default the button's style is set to PrimaryLarge.

Usage

Using styles:

<dui:Button Style="{dui:Styles Button=SecondaryLarge}"          
            Text="Button"
            Command="{Binding Something}" />

Rounded button with a image:

<dui:Button Style="{dui:Styles Button=SecondaryRoundedLarge}"          
            ImageSource="{dui:Icons bell_line}"
            Command="{Binding Something}" />

Do not use Text with a ImageSource when creating rounded buttons, as this will lead to bad UX.

Image placement:

In the following example a Button's Image is set to the right side of the Button's text. Also the Button's style is implicitly set to PrimaryLarge.

<dui:Button ImageSource="{dui:Icons bell_line}"
            ImagePlacement="Right"
            Text="Button"
            Command="{Binding Something}" />

Properties

Inspect the components properties class to further customize and use it.