---
layout: post
title:  "Buttons"
subtitle: "We have three main buttons styles: primary, secondary, and tertiary. Ideally, the primary button should only ever be used once on a page as the main call to action."
categories: components
permalink: /components/buttons/
---

<div class="pattern">
  <a class="btn btn--primary">Get Started</a>
  <a class="btn btn--primary ghosted">Get Started</a>
  <a class="btn btn--primary ghosted is-loading">Get Started</a>
</div>

``` html
<a class="btn btn--primary">Get Started</a>
<a class="btn btn--primary ghosted">Get Started</a>
<a class="btn btn--primary ghosted is-loading">Get Started</a>
```

<div class="pattern pattern--dark">
  <a class="btn btn--secondary">Update</a>
  <a class="btn btn--secondary ghosted">Update</a>
  <a class="btn btn--secondary ghosted is-loading">Update</a>
</div>

``` html
<a class="btn btn--secondary">Update</a>
<a class="btn btn--secondary ghosted">Update</a>
<a class="btn btn--secondary ghosted is-loading">Update</a>
```

<div class="pattern pattern--dark">
  <a class="btn btn--tertiary">View Libraries</a>
</div>

``` html
<a class="btn btn--tertiary">View Libraries</a>
```

## Small
There is also a smaller button style. This is mainly used for UI elements, and in tables.

<div class="pattern pattern">
  <a class="btn btn--primary btn--small">Copy Snippet</a>
  <a class="btn btn--neutral btn--small">Test</a>
  <a class="btn btn--neutral btn--small is-loading">Test</a>
</div>

``` html
<a class="btn btn--primary btn--small">Copy Snippet</a>
<a class="btn btn--neutral btn--small">Test</a>
<a class="btn btn--neutral btn--small is-loading">Test</a>
```

## Social Buttons
These are used for linking social accounts when signing in/registering with Pusher

<div class="pattern">
  <button class="btn btn--google">Connect Google Account</button>
  <button class="btn btn--github">Connect GitHub Account</button>
</div>

``` html
  <button class="btn btn--google">Connect Google Account</button>
  <button class="btn btn--github">Connect GitHub Account</button>
```