Buttons

	Normal	Disabled
`<a class="button">`	Button	Button
`<input type="button">`
`<input type="reset">`
`<input type="submit">`
`<button type="button">`
`<button type="reset">`
`<button type="submit">`
`<a class="button button--alert">`	Button	Button
`<input class="button--alert" type="button">`
`<input class="button--alert" type="reset">`
`<input class="button--alert" type="submit">`
`<button class="button--alert" type="button">`
`<button class="button--alert" type="reset">`
`<button type="submit" class="button--alert">`
`<a class="button button--success">`	Button	Button
`<input class="button--success" type="button">`
`<input class="button--success" type="reset">`
`<input class="button--success" type="submit">`
`<button class="button--success" type="button">`
`<button class="button--success" type="reset">`
`<button type="submit" class="button--success">`
`<a class="button button--secondary">`	Button	Button
`<input class="button--secondary" type="button">`
`<input class="button--secondary" type="reset">`
`<input class="button--secondary" type="submit">`
`<button class="button--secondary" type="button">`
`<button class="button--secondary" type="reset">`
`<button type="submit" class="button--secondary">`

Inline <a>, <input>, <button>

Button

<p>
    <a class="button" href="javascript:void(0)">Button</a>
    <input type="button" value="Button">
    <button type="button">Button</button>
</p>

Input with postfix button

<p class="postfix-container">
    <input type="text" value="Input">
    <button class="button--postfix" type="button">Button</button>
</p>

<p class="postfix-container">
    <input disabled type="text" value="Input">
    <button class="button--postfix" disabled type="button">Button</button>
</p>

Input with prefix button

<p class="prefix-container">
    <button class="button--prefix" type="button">Button</button>
    <input type="text" value="Input">
</p>

<p class="prefix-container">
    <button class="button--prefix" disabled type="button">Button</button>
    <input disabled type="text" value="Input">
</p>

Input with prefix and postfix buttons

<p class="prefix-container postfix-container">
    <button class="button--prefix" type="button">Button</button>
    <input type="text" value="Input">
    <button class="button--postfix" type="button">Button</button>
</p>

<p class="prefix-container postfix-container">
    <button class="button--prefix" disabled type="button">Button</button>
    <input disabled type="text" value="Input">
    <button class="button--postfix" disabled type="button">Button</button>
</p>

Select with postfix button

<p class="postfix-container">
    <select>
        <option value="">Select an option</option>
        <option>John</option>
        <option>Paul</option>
        <option>George</option>
        <option>Ringo</option>
    </select>
    <button class="button--postfix" type="button">Button</button>
</p>

<p class="postfix-container">
    <select disabled>
        <option value="">Select an option</option>
        <option>John</option>
        <option>Paul</option>
        <option>George</option>
        <option>Ringo</option>
    </select>
    <button class="button--postfix" disabled type="button">Button</button>
</p>

Select with prefix button

<p class="prefix-container">
    <button class="button--prefix" type="button">Button</button>
    <select>
        <option value="">Select an option</option>
        <option>John</option>
        <option>Paul</option>
        <option>George</option>
        <option>Ringo</option>
    </select>
</p>

<p class="prefix-container">
    <button class="button--prefix" disabled type="button">Button</button>
    <select disabled>
        <option value="">Select an option</option>
        <option>John</option>
        <option>Paul</option>
        <option>George</option>
        <option>Ringo</option>
    </select>
</p>

Select with prefix and postfix button

<p class="prefix-container postfix-container">
    <button class="button--prefix" type="button">Button</button>
    <select>
        <option value="">Select an option</option>
        <option>John</option>
        <option>Paul</option>
        <option>George</option>
        <option>Ringo</option>
    </select>
    <button class="button--postfix" type="button">Button</button>
</p>

<p class="prefix-container postfix-container">
    <button class="button--prefix" disabled type="button">Button</button>
    <select disabled>
        <option value="">Select an option</option>
        <option>John</option>
        <option>Paul</option>
        <option>George</option>
        <option>Ringo</option>
    </select>
    <button class="button--postfix" disabled type="button">Button</button>
</p>

Button in disguise

Here is a link and here is a .

<p>
    Here is a <a href="javascript:void(0)">link</a> and here is a <button class="link">button</button>.
</p>

Icon buttons

<p>
    <button class="button--icon icon icon--menu">Menu</button>
    <button class="button--icon icon icon--search">Search</button>
    <button class="button--icon icon icon--play">Play</button>
    <button class="button--icon icon icon--pause">Pause</button>
    <button class="button--icon icon icon--x">Close</button>
    <button class="button--icon icon icon--chevron-left">Previous</button>
    <button class="button--icon icon icon--chevron-right">Next</button>
    <button class="button--icon icon icon--plus">Add</button>
</p>