Button

In groundhog since v0.1.1

Examples


<button role="button" type="button" class="btn btn--primary">Click me</button>
<button role="button" type="button" class="btn btn--primary btn--cta">Click me</button>
<button role="button" type="button" class="btn btn--primary btn--warning">Click me</button>
<button role="button" type="button" class="btn btn--primary btn--error">Click me</button>

    

<button role="button" type="button" class="btn btn--secondary">Click me</button>
<button role="button" type="button" class="btn btn--secondary btn--cta">Click me</button>
<button role="button" type="button" class="btn btn--secondary btn--warning">Click me</button>
<button role="button" type="button" class="btn btn--secondary btn--error">Click me</button>
    

<button role="button" type="button" class="btn btn--primary btn--icon">
  <svg role="img" class="icon">
    <use xlink:href="#ruxit"></use>
  </svg>
</button>

    

<button role="button" type="button" class="btn btn--primary">
  <svg role="img" class="icon icon--small icon--white">
    <use xlink:href="#ruxit"></use>
  </svg>
  Cancel
</button>

    

<button role="button" type="button" class="btn btn--primary theme--dark">Click me</button>
<button role="button" type="button" class="btn btn--primary theme--dark btn--cta">Click me</button>
<button role="button" type="button" class="btn btn--primary theme--dark btn--warning">Click me</button>
<button role="button" type="button" class="btn btn--primary theme--dark btn--error">Click me</button>

    

<button role="button" type="button" class="btn btn--secondary theme--dark">Click me</button>
<button role="button" type="button" class="btn btn--secondary theme--dark btn--cta">Click me</button>
<button role="button" type="button" class="btn btn--secondary theme--dark btn--warning">Click me</button>
<button role="button" type="button" class="btn btn--secondary theme--dark btn--error">Click me</button>
    

<button role="button" type="button" class="btn btn--primary btn--icon theme--dark">
  <svg role="img" class="icon">
    <use xlink:href="#ruxit"></use>
  </svg>
</button>

    

<button disabled role="button" type="button" class="btn btn--primary theme--dark">
  <svg role="img" class="icon icon--small icon--white">
    <use xlink:href="#ruxit"></use>
  </svg>
  Cancel
</button>

    

<div class="theme--dark">
  <button role="button" type="button" class="btn btn--primary">Click me</button>
  <button role="button" type="button" class="btn btn--primary btn--cta">Click me</button>
  <button role="button" type="button" class="btn btn--primary btn--warning">Click me</button>
  <button role="button" type="button" class="btn btn--primary btn--error">Click me</button>
</div>

    

<div class="theme--dark">
  <button role="button" type="button" class="btn btn--secondary">Click me</button>
  <button role="button" type="button" class="btn btn--secondary btn--cta">Click me</button>
  <button role="button" type="button" class="btn btn--secondary btn--warning">Click me</button>
  <button role="button" type="button" class="btn btn--secondary btn--error">Click me</button>
</div>
    

Introduction

The Groundhog button is a visual block representing an action or link on the page. The button usually holds either text or an icon representing an action. The button can be used to make a link on a webpage more noticeable, or draw attention to an action on the page.

Button versions

The Groundhog button appears in a two versions, each available on light and dark backgrounds:

Including a button

  1. To include a Groundhog button add either an <a> (anchor/link) or an <button> element. Include the necessary text or icon content.
    <a href="#">This is a button</a>
    
  2. Add the necessary Groundhog classes to the elements class attribute.
    <a href="#" class="btn btn--primary">This is a button</a>
    
  3. The button is ready to use

Accessibility

When using a button element, make sure that you at least include the role="button" and type="button" attributes to the element.

Using Icons with Buttons

To use buttons and icons together, you need the icon module as well as the icon component. Groundhog uses svg reference functionality to reduce load duplication of icon content. You can find the code to use an icon within a button here.

Available classes for button

class name effect
.btn Base class for the button element
.btn--primary Sets the button as a primary button
.btn--secondary Sets the button as a secondary button
.btn--icon Sets the button to an icon only state
.theme--dark Sets the theme of the button to dark

Available mixins for button

class name effect
btn-common Base styles for all button variants
btn-primary Primary button styles
btn-secondary Secondary button styles
btn-icon Icon only button styles
btn-icon-element Applies styles on icon elements in buttons
btn-primary-theme-dark Priary button on dark bg styles
btn-secondary-theme-dark Secondary button on dark bg styles