Buttons

We are using Bootstrap custom buttons. We use only a subset of what they offer to not have buttons with multiple tones of a color.

Example

Buttons with solid background

Buttons with outline

Button Position

To draw the attention on the default button, it needs to use the button with solid background. All secondary buttons have the outline only. Buttons with primary action are placed on the right.

Destructive action:

Confirm action:

Buttons Size

Use the class btn-lg for larger buttons and the class btn-sm for smaller buttons.

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
%h5 Buttons with solid background

%button.btn.btn-primary{ type: 'button' } Primary
%button.btn.btn-secondary{ type: 'button' } Secondary
%button.btn.btn-danger{ type: 'button' } Danger
%button.btn.btn-warning{ type: 'button' } Warning

%h5 Buttons with outline

%button.btn.btn-outline-primary{ type: 'button' } Primary
%button.btn.btn-outline-secondary{ type: 'button' } Secondary
%button.btn.btn-outline-danger{ type: 'button' } Danger
%button.btn.btn-outline-warning{ type: 'button' } Warning

%h5 Button Position

%p To draw the attention on the default button, it needs to use the button with solid background. All secondary buttons have the outline only. Buttons with primary action are placed on the right.

`Destructive action`:
%button.btn.btn-outline-secondary{ type: 'button' } Cancel
%button.btn.btn-danger{ type: 'button' } Delete
%br
%br
`Confirm action`:
%button.btn.btn-outline-secondary{ type: 'button' } Cancel
%button.btn.btn-primary{ type: 'button' } Accept

%h5 Buttons Size

%p
  Use the class
  %code btn-lg
  for larger buttons and the class
  %code btn-sm
  for smaller buttons.

%button.btn.btn-primary.btn-lg{ type: 'button' } Large button
%button.btn.btn-primary{ type: 'button' } Button
%button.btn.btn-primary.btn-sm{ type: 'button' } Small button