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" />

Right

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