Buttons

Default Buttons

The following utility classes have been created for use with buttons. You'll find this works very similar to that of Bootstrap.
1
<Button Text="Primary" StyleClass="btn,btn-primary" />
2
<Button Text="Success" StyleClass="btn,btn-success" />
3
<Button Text="Info" StyleClass="btn,btn-info" />
4
<Button Text="Warning" StyleClass="btn,btn-warning" />
5
<Button Text="Danger" StyleClass="btn,btn-danger" />
6
<Button Text="Dark" StyleClass="btn,btn-dark" />
7
<Button Text="Light" StyleClass="btn,btn-light" />
8
<Button Text="Link" StyleClass="btn,btn-link" />
Copied!
Outline Buttons
You can create outline buttons with the following markup.
1
<Button Text="Primary" StyleClass="btn,btn-outline-primary" />
2
<Button Text="Success" StyleClass="btn,btn-outline-success" />
3
<Button Text="Info" StyleClass="btn,btn-outline-info" />
4
<Button Text="Warning" StyleClass="btn,btn-outline-warning" />
5
<Button Text="Danger" StyleClass="btn,btn-outline-danger" />
6
<Button Text="Dark" StyleClass="btn,btn-outline-dark" />
7
<Button Text="Light" StyleClass="btn,btn-outline-light" />
Copied!

Button Sizes

You can also control the sizes of your buttons with these classes.
1
<Button Text="Primary" StyleClass="btn,btn-primary,btn-lg" />
2
<Button Text="Success" StyleClass="btn,btn-primary" />
3
<Button Text="Info" StyleClass="btn,btn-primary,btn-sm" />
Copied!

Inline Buttons

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

Centered

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

Left

1
<Button Text="Left Justified"
2
StyleClass="btn, btn-primary" HorizontalOptions="Start" />
Copied!
1
<Button Text="Right Justified"
2
StyleClass="btn, btn-primary" HorizontalOptions="End" />
Copied!
Last modified 1yr ago