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.

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.