Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Bootstrap documentation

Primary


                  <button type="button" class="btn btn-primary btn-lg">Large button</button>
                  

                  <button type="button" class="btn btn-primary">Base button</button>
                  

                  <button type="button" class="btn btn-primary btn-sm">Small button</button>
                  

                  <button type="button" class="btn btn-primary btn-xs">Extra small</button>

Primary outline


                  <button type="button" class="btn btn-outline-primary btn-lg">Large button</button>
                  

                  <button type="button" class="btn btn-outline-primary">Base button</button>
                  

                  <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                  

                  <button type="button" class="btn btn-outline-primary btn-xs">Extra small</button>

Primary outline light


                  <button type="button" class="btn btn-outline-primary btn-lg">Large button</button>
                  

                  <button type="button" class="btn btn-outline-primary">Base button</button>
                  

                  <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                  

                  <button type="button" class="btn btn-outline-primary btn-xs">Extra small</button>

Secondary


                  <button type="button" class="btn btn-secondary btn-lg">Large button</button>
                  

                  <button type="button" class="btn btn-secondary">Base button</button>
                  

                  <button type="button" class="btn btn-secondary btn-sm">Small button</button>
                  

                  <button type="button" class="btn btn-secondary btn-xs">Extra small</button>

Loading state

class modifier: loading


                  <button type="button" class="btn btn-primary btn-lg loading">Large button</button>
                  

                  <button type="button" class="btn btn-primary loading">Base button</button>
                  

                  <button type="button" class="btn btn-primary btn-sm loading">Small button</button>
                  

                  <button type="button" class="btn btn-primary btn-xs loading">Extra small</button>

Buttons

Primary

Primary outline

Primary outline light

Secondary

Loading state

Jump to