Buttons 2.3 implementation

Installation

First of all, make sure you have followed the preliminary setup instructions. Next, cd into the directory containing your web app. You can install the gaia-button component with:

bower install gaia-components/gaia-button

The command installs not only the gaia-button component, but also the base gaia-component code that all gaia components need to run.

<gaia-button> components are not dependent on the Gaia icons set that many Gaia web components install by default. However, you may well want to use icons in your buttons — if you do, you'll need to install the gaia-icons separately using:

bower install gaia-components/gaia-icons

Examples

The following gives you an idea of what rendered gaia-buttons would look like:

You can find the gaia-button source code on Github, plus a detailed live example.

Code

This section details all the code you need.

CSS and JavaScript

To include all of the styles and script that this component makes use of, you need to add the following to your document head:

<script src="bower_components/gaia-icons/gaia-icons.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/gaia-icons.css"></link>
<script src="bower_components/gaia-component/gaia-component.js"></script>
<script src="bower_components/gaia-button/gaia-button.js"></script>

HTML

With the above setup done, you can now use a <gaia-button> element anywhere you like. The above buttons we achieved with this code:

<section>
    <gaia-button>Gaia button 1</gaia-button>
  </section>

  <hr/>

  <section>
    <gaia-button><i data-icon="back-light"></i><span>Back</span></gaia-button>
    <gaia-button><span>Forward</span><i data-icon="forward-light"></i></gaia-button>
  </section>

  <hr/>

  <section>
    <gaia-button circular><i data-icon="camera"></i></gaia-button>
    <gaia-button circular><i data-icon="bug"></i></gaia-button>
    <gaia-button circular><i data-icon="video"></i></gaia-button>
    <gaia-button circular><i data-icon="camera"></i></gaia-button>
    <gaia-button circular><i data-icon="reload"></i></gaia-button>
    <gaia-button circular><i data-icon="airplane"></i></gaia-button>
  </section>

• A basic <gaia-button> element with no attributes creates a simple button.
• To include icons in your buttons, you need to include an <i> element inside the <gaia-button> element with a data-icon attribute that includes the correct identifier for the icon you want to use. See the Gaia icons set article for a full reference.
• <gaia-button> also accepts two attributes that modify its behavior:
  • disabled: Disables the button, making it unpressable.
  • circular: Makes the button into a perfect circle that can contain an icon.