Buttons

Buttons are used as triggers for actions. Depending on the use case, buttons contain a label and/or an icon. There are a variety of styles, sizes, and variations that can be used for different situations.

All button labels are sentence case. They should be as short as possible while clearly explaining what will happen when the button is clicked.

Button styles

There are 6 button styles:

Primary, the general button style.
Secondary, indicates an action will be triggered, such as a form or sign up.
Ghost, indicates an alternate button style.
Reverse, an option for dark themes/backgrounds.
Disabled, an option for dark themes/backgrounds.
Big, used for when default just won't do. Useful for keeping the interface simple.

All buttons are prefixed with the usa-button- class. The usa-button class can be applied to any element. Try to use <button> elements when an action won’t change the URL/route, and <a> elements when the action will change the URL/route.

<button type="button" class="usa-button">Default</button>
<button type="button" class="usa-button usa-button-secondary">Secondary</button>
<button type="button" class="usa-button usa-button-outline">Danger</button>
<button type="button" class="usa-button usa-button-outline-inverse">Warning</button>
<button type="button" class="usa-button usa-button-big">Link</button>

Disabled state


   
  <button class="usa-button usa-button-disabled">Default
</button>





  Toggle buttons

  Similar to a checkbox, toggle buttons can be toggled between active or not active.

  Add the active class and the aria-pressed="true" attribute to a button.


     
    
    
        
        
        
    


  
    <button type="button" class="btn btn-default active" aria-pressed="true">Active</button>
<button type="button" class="btn btn-default">Normal</button> 
<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default active" aria-pressed="true">Active</button>
    <button type="button" class="btn btn-default">Right</button>
</div>
  





  Icon buttons

  Icon buttons are buttons with an icon inside. An icon button may or may not have text. Icon buttons can help save space or improve the ability to scan/find buttons quickly.

  Use btn-icon-only for buttons with only an icon in it. This optimizes the padding.

  For an icon without chrome, use a usa-button-hover.


        


  
    <button type="button" class="usa-button usa-button-secondary"><i class="fa fa-comment"></i> &nbsp;Comment</button> 

<button type="button" class="usa-button btn-icon-only usa-button-primary-alt"><i class="fa fa-print"></i><span class="sr-only">Print</span></button> 

<button type="button" class="usa-button btn-icon-only usa-button-primary"><i class="fa icon-inverse fa-floppy-o"></i><span class="sr-only">Save</span></button> 

<button type="button" class="usa-button btn-icon-only usa-button-hover"><i class="fa fa-calendar-o"></i><span class="sr-only">Calendar</span></button> 

<button type="button" class="usa-button">Lock&nbsp; <i class="fa fa-arrow-right"></i></button>