Fork me on GitHub

Aoi (青い) style guide

Radio Buttons

In order to render a group of radio buttons, use the btn-radio class on <button>, <input type="button">, or <a class="btn"> elements enclosed in a block-level element with the radio-buttons class.

<div class="radio-buttons">
    <button class="btn btn-radio btn-radio-selected" data-view="one" onclick="filterView(this);">One</button>
    <button class="btn btn-radio" data-view="two" onclick="filterView(this);">Two</button>
    <button class="btn btn-radio" data-view="three" onclick="filterView(this);">Three</button>
</div>

Small Radio Buttons

Add the btn-small class on the buttons to render small radio buttons

<div class="radio-buttons">
    <button class="btn btn-small btn-radio btn-radio-selected" data-view="one" onclick="filterView(this);">One</button>
    <button class="btn btn-small btn-radio" data-view="two" onclick="filterView(this);">Two</button>
    <button class="btn btn-small btn-radio" data-view="three" onclick="filterView(this);">Three</button>
</div>