Please login to access all of the features of the Community Site.

Button

Default Buttons

The following utility classes have been created for use with buttons. You'll find this works very similar to that of Bootstrap.

<Button Text="Primary" StyleClass="btn,btn-primary" />
<Button Text="Success" StyleClass="btn,btn-success" />
<Button Text="Info" StyleClass="btn,btn-info" />
<Button Text="Warning" StyleClass="btn,btn-warning" />
<Button Text="Danger" StyleClass="btn,btn-danger" />
<Button Text="Dark" StyleClass="btn,btn-dark" />
<Button Text="Light" StyleClass="btn,btn-light" />
<Button Text="Link" StyleClass="btn,btn-link" />

Outline Buttons

You can create outline buttons with the following markup.

<Button Text="Primary" StyleClass="btn,btn-outline-primary" />
<Button Text="Success" StyleClass="btn,btn-outline-success" />
<Button Text="Info" StyleClass="btn,btn-outline-info" />
<Button Text="Warning" StyleClass="btn,btn-outline-warning" />
<Button Text="Danger" StyleClass="btn,btn-outline-danger" />
<Button Text="Dark" StyleClass="btn,btn-outline-dark" />
<Button Text="Light" StyleClass="btn,btn-outline-light" />

Button Sizes

You can also control the sizes of your buttons with these classes.

<Button Text="Primary" StyleClass="btn,btn-primary,btn-lg" />
<Button Text="Success" StyleClass="btn,btn-primary" />
<Button Text="Info" StyleClass="btn,btn-primary,btn-sm" />

Inline Buttons

By default buttons are blocks (they take the full width). You can make them inline by using the example code below.

Centered

<Button Text="Centered Justified"
        StyleClass="btn, btn-primary" HorizontalOptions="Center" />

Left

<Button Text="Left Justified"
        StyleClass="btn, btn-primary" HorizontalOptions="Start" />

<Button Text="Right Justified"
        StyleClass="btn, btn-primary" HorizontalOptions="End" />