Buttons 2.0 implementation

This article gives you all you need to implement v2.0 Gaia-style Buttons in your own app.

Live sample

The following gives you an idea of what the rendered buttons would look like.

Code

Here is the code you'll need.

CSS

<link href="(your styles folder)/style/buttons.css" rel="stylesheet" type="text/css">

The CSS can be found in the Gaia project 2.0 branch under shared/style/buttons.css. Copy this into your own project, along with the associated resources.

HTML

Note: The CSS inside the <style> element isn't needed for the implementation: it is just for the purposes of this example.

<!doctype html>
<html>
<head>
  <link href="https://mdn.github.io/gaia-2.0-bb/buttons.css" rel="stylesheet" type="text/css">
  <link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }
    label.bb-docs {
      font-family: sans-serif;
      font-size: 1.2rem;
      margin-left: 1.5rem;
    }
    h2.bb-docs {
      font-size: 1.8rem;
      font-weight: lighter;
      color: #666;
      margin: -0.1rem 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 3rem;
      border: solid 0.1rem #e8e8e8;
      font-family: sans-serif;
    }
    div.bb-docs {
      padding: 1.5rem;
    }
    div.bb-docs.skin-organic {
      background: #f4f4f4;
    }
    div.bb-docs.skin-dark {
      background: #000;
    }
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    body[role="application"] > [role="region"] {
      height: 100%;
      position: relative;
    }
  </style>
</head>
<body>
<section style="margin-bottom: 30px">
<!-- Default, primary action, and danger buttons -->
<button>Default</button>
<button class="bb-button recommend">Primary</button>
<button class="danger">Danger</button>
</section>
<section style="margin-bottom: 30px">
<! -- Disabled button examples -->
<div>
  <button disabled="disabled">Default</button>
  <button class="bb-button recommend" aria-disabled="true">Recommend</button>
  <button class="danger" disabled="disabled">Danger</button>
</div>
<div class="skin-dark"><!-- disabled buttons over dark background -->
  <button disabled="disabled">Default</button>
  <button class="recommend" disabled="disabled">Recommend</button>
  <button class="danger" disabled="disabled">Danger</button>
</div>
</section>
<section style="margin-bottom: 30px">
<!-- List buttons -->
<ul style="list-style-type:none;padding:0">
  <li>
    <button>Default</button>
  </li>
  <li>
    <button disabled="disabled">Disabled</button>
  </li>
  <li><button>Action 1</button></li>
  <li><button data-icon="forward">View Name</button></li>
  <li><button data-icon="expand">Tuesday September 18, 2012</button></li>
</ul>
</section>
</body>
</html>

Live sample

Code

CSS

HTML

Document Tags and Contributors