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.

The styles are grouped into roles:

• Primary : Use primary button as the main call to action/to move the user to the next step in their flow

Example use case: going to the next step in a step-by-step process, or to submit a form.

• Secondary : Use secondary buttons for secondary actions.

Example use case: to allow users to get back to a previous step in the process, or as non-necessary actions.

• Ghost : Use ghost buttons for alternative/tertiary actions.

Example use case: You want to offer the user another feature which is not part of the main flow or relevant for all your users.

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.