Buttons

Standard Buttons

A-Tag Button
1
2  // Standard buttons primary and secondary
3  <a class="btn btn-primary me-1" href="#">
4    A-Tag Button
5  </a>
6  <button class="btn btn-secondary mx-1" href="#">
7    A-Tag Button
8  </button>
9  <button class="btn btn-light" type="reset">
10    Reset Button
11 </button>
12

Button Group

1
2  // Button group - primary and secondary
3  <div class="btn-group" role="group" aria-label="Basic example">
4    <button type="button" class="btn btn-secondary">
5      Left
6    </button>
7    <button type="button" class="btn btn-secondary">
8      Middle
9    </button>
10    <button type="button" class="btn btn-secondary">
11      Right
12    </button>
13  </div>
14

Outlined Buttons

1
2  // Buttons Outlined - all colors
3  <button type="button" class="btn btn-outline-primary">
4    Primary
5  </button>
6  <button type="button" class="btn btn-outline-secondary">
7    Secondary
8  </button>
9  <button type="button" class="btn btn-outline-success">
10    Success
11  </button>
12  <button type="button" class="btn btn-outline-danger">
13    Danger
14  </button>
15  <button type="button" class="btn btn-outline-warning">
16    Warning
17  </button>
18  <button type="button" class="btn btn-outline-info">
19    Info
20  </button>
21  <button type="button" class="btn btn-outline-light">
22    Light
23  </button>
24  <button type="button" class="btn btn-outline-dark">
25    Dark
26  </button>  
27

Small Buttons

A-Tag Button SmallA-Tag Button Small
1
2  // Small buttons - primary and secondary
3  <a class="btn btn-primary btn-sm" href="#">
4    A-Tag Button Small
5  </a>
6  <a class="btn btn-secondary btn-sm" href="#">
7    A-Tag Button Small
8  </a>
9

Large Buttons

A-Tag Button LargeA-Tag Button Large
1
2  // Large buttons - primary and secondary
3  <a class="btn btn-primary btn-lg" href="#">
4    A-Tag Button Large
5  </a>
6  <a class="btn btn-secondary btn-lg" href="#">
7    A-Tag Button Large
8  </a>
9

Disabled Buttons

Button Collection

1
2  // Button Collection - all colors
3  <button type="button" class="btn btn-outline-primary">
4    Primary
5  </button>
6  <button type="button" class="btn btn-outline-secondary">
7    Secondary
8  </button>
9  <button type="button" class="btn btn-outline-success">
10    Success
11  </button>
12  <button type="button" class="btn btn-outline-danger">
13    Danger
14  </button>
15  <button type="button" class="btn btn-outline-warning">
16    Warning
17  </button>
18  <button type="button" class="btn btn-outline-info">
19    Info
20  </button>
21  <button type="button" class="btn btn-outline-light">
22    Light
23  </button>
24  <button type="button" class="btn btn-outline-dark">
25    Dark
26  </button>  
27

Link Button

Link
1
2  // Link button
3
4  <a className="btn btn-primary" href="#" role="button">
5    Link
6  </a>
7

Close Button

1
2  // Close button
3
4  <button type="button" className="btn-close" aria-label="Close"></button>
5