VGR Styleguide

Buttons: Icon 

<button class="vgr-button" type="submit">
  <svg class="vgr-icon vgr-icon--" ><use xlink:href="/icons/sprite/icons.svg#search"></use></svg>

  Button
</button>
 
<button class="vgr-button" type="submit">
  {% render "@icon", iconData %}
  {% if iconWithText %}{{ buttonText }}{% endif %}
</button>
 
{
  "buttonText": "Button",
  "modifier": "icon",
  "iconWithText": true,
  "iconData": {
    "id": "search"
  }
}
  • Content: 
    .vgr-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: .4rem 1.5rem;
  border-width: 1px;
  border-style: solid;
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: Helvetica,Arial,sans-serif;
  line-height: 150%;
  cursor: pointer;

  .vgr-icon {
    width: 1rem;
    height: 1rem;
  }

  &:hover,
  &:focus {
    background-color: inherit;
    box-shadow: inherit;
    color: $color-gray-100;
  }

  &[disabled] {
    background-color: $color-gray-100;
    background-image: none;
    color: $color-black;
    cursor: not-allowed;
    box-shadow: none;

    &:hover,
    &:focus {
      background-color: $color-gray-100;
      box-shadow: none;
      color: $color-black;
    }
  }

  &--primary {
    border-color: #4ab31f;
    border-bottom-color: #075d2d;
    background-color: #13aa55;
    background-image: linear-gradient(to bottom,#4ab31f 0,#39791f 100%);
    color: $color-white;
  }
}

.vgr-button--subtle {
  padding: 10px 16px 12px;
  border: solid 1px $color-gray-lighter;
  border-radius: 2px;
  background: $color-gray-100;
  background-image: linear-gradient(to bottom,$color-gray-100 0%,lighten($color-gray-lighter, 5%) 100%);
  color: #2d2d2d;
  text-decoration: none;
  font-weight: 700;
  font-size: .8125em;
  transition: all .1s linear;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  &:active {
    color: #2d2d2d;
  }

  &:hover,
  &:focus {
    border-color: #c6c6c6;
    background-image: linear-gradient(to bottom,#f8f8f8 0%,#f1f1f1 100%);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    color: #2d2d2d;
    text-decoration: none;
  }
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: components/base/button/_button.scss
  • Size: 1.6 KB

Text from The U.S. Web Design Standards

Implementation

The examples demonstrate how to use button elements. To use a button style on an anchor link, add the vgr-button class to your anchor link.

To use a different style button on your anchor link, add the special button class in addition to vgr-button:

  • vgr-button-primary-alt
  • vgr-button-secondary
  • vgr-button-gray
  • vgr-button-outline
  • vgr-button-outline-inverse
  • vgr-button-disabled
  • vgr-button-big

For example, a secondary button style would use the following code: <a class="vgr-button vgr-button-secondary" href="/my-link">My button</a>

Accessibility

  • Buttons should display a visible focus state when users tab to them.
  • Avoid using <div> or <img> tags to create buttons. Screen readers don’t automatically know either is a usable button.
  • When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.

Usability

When to use

  • Use buttons for the most important actions you want users to take on your site, such as “download,” “sign up,” or “log out.”

When to consider something else

  • If you want to lead users between pages of a website. Use links instead.
  • Less popular or less important actions may be visually styled as links.

Guidance

  • Generally, use primary buttons for actions that go to the next step and use secondary buttons for actions that happen on the current page.
  • Style the button most users should click in a way that distinguishes from other buttons on the page. Try using the “large button” or the most visually distinct fill color.
  • Make sure buttons should look clickable—use color variations to distinguish static, hover and active states.
  • Avoid using too many buttons on a page.
  • Use sentence case for button labels.
  • Button labels should be as short as possible with “trigger words” that your users will recognize to clearly explain what will happen when the button is clicked (for example, “download,” “view” or “sign up”).
  • Make the first word of the button’s label a verb. For example, instead of “Complaint Filing” label the button “File a complaint.”
  • At times, consider adding an icon to signal specific actions (“download”, “open in a new window”, etc).