NSF SBIR UI style guide

Components

Buttons

Primary button

Secondary button

Using anchor tags instead of buttons

Normal

• Code

    
  #### Primary button
  <section class="usa-grid">
    <button class="usa-button">Normal</button>
    <button class="usa-button usa-button-hover">Hover</button>
    <button class="usa-button usa-button-active">Active</button>
    <button class="usa-button usa-button-focus">Focus</button>
    <button class="usa-button usa-button-disabled">Disabled</button>
  </section>
  
  #### Secondary button
  <section class="background-dark usa-grid">
    <button class="usa-button usa-button-secondary">Normal</button>
    <button class="usa-button-hover usa-button-secondary">Hover</button>
    <button class="usa-button-active usa-button-secondary">Active</button>
    <button class="usa-button-focus usa-button-secondary">Focus</button>
    <button class="usa-button-disabled usa-button-secondary">Disabled</button>
  </section>
  
  #### Using anchor tags instead of buttons
  <a class="usa-button usa-button-secondary" href="">Normal</a>
  
  

• Documentation

  Our button styles closely resemble those defined by the U.S. Web Design Standards. We have overriden them in places to more closely align the look and feel with the 18F Brand.

  Additional resources:

  • USWDS references
  • SCSS references