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:

Primary button btn--primary
Secondary button btn--secondary

Including a button

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>
```
Add the necessary Groundhog classes to the elements class attribute.
```
<a href="#" class="btn btn--primary">This is a button</a>
```
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