Buttons: Default

<!-- Primary -->
<button class="btn btn--lightbg">Primary Button</button>
<button class="btn btn--lightbg icon--play">Primary Button with Leading Icon</button>
<button class="btn btn--lightbg icon--link">Primary Button with Trailing Icon</button>
<button class="btn btn--lightbg" disabled>Primary Button Disabled</button>

<!-- Primary (Dark Background) -->
<div class="has-background-ucla-blue">
    <button class="btn btn--darkbg">Primary Dark Background button</button>
    <button class="btn btn--darkbg icon--play">Primary Dark Background Btn with Leading Icon</button>
    <button class="btn btn--darkbg icon--link">Primary Dark Background Btn with Trailing Icon</button>
    <button class="btn btn--darkbg" disabled>Primary Dark Background Btn Disabled</button>
</div>
</br>

<!-- Secondary -->
<button class="btn btn--secondary--lightbg">Secondary Button</button>
<button class="btn btn--secondary--lightbg icon--play">Secondary with Icon</button>
<button class="btn btn--secondary--lightbg icon--link">Secondary with Link</button>
<button class="btn btn--secondary--lightbg" disabled>Secondary Disabled</button>

<!-- Secondary (Dark Background) -->
<div class="has-background-ucla-blue	">
    <button class="btn btn--secondary--darkbg">Secondary Dark Background Button</button>
    <button class="btn btn--secondary--darkbg icon--play">Secondary Dark Background with Icon</button>
    <button class="btn btn--secondary--darkbg icon--link">Secondary Dark Background with Link</button>
    <button class="btn btn--secondary--darkbg" disabled>Secondary Dark Background Disabled</button>
</div>

</br>

<!-- Tertiary -->
<button class="btn btn--tertiary">Tertiary Button</button>
<button class="btn btn--tertiary icon--play">Tertiary with Icon</button>
<button class="btn btn--tertiary" disabled>Tertiary Disabled</button>

</br>

<!-- Button Group -->
<div class="btn--group">
    <button class="btn btn--group-left">Group - Left (Req)</button>
    <button class="btn btn--group-center">Group - Center (Optional)</button>
    <button class="btn btn--group-right">Group - Right (Req)</button>
</div>

<!-- Button Group (Disabled) -->
<div class="btn--group">
    <button class="btn btn--group-left" disabled>Group - Disabled Left (Req)</button>
    <button class="btn btn--group-center" disabled>Group - Disabled Center (Optional)</button>
    <button class="btn btn--group-right" disabled>Group - Disabled Right (Req)</button>
</div>
</br>

<!-- Pagination (Boxed) -->
<ul class="pagination--boxed">
    <li><a class="page" href="#">&laquo;</a></li>
    <li><a class="page page--current" href="#">1</a></li>
    <li><a class="page" href="#">2</a></li>
    <li><a class="page" href="#">3</a></li>
    <li><a class="page" href="#">4</a></li>
    <li><a class="page" href="#">5</a></li>
    <li><a class="page" href="#">6</a></li>
    <li><a class="page" href="#">7</a></li>
    <li><a class="page" href="#">&raquo;</a></li>
</ul>

<!-- Pagination (Unboxed) -->
<ul class="pagination">
    <li><a class="page" href="#">&laquo;</a></li>
    <li><a class="page page--current" href="#">1</a></li>
    <li><a class="page" href="#">2</a></li>
    <li><a class="page" href="#">3</a></li>
    <li><a class="page" href="#">4</a></li>
    <li><a class="page" href="#">5</a></li>
    <li><a class="page" href="#">6</a></li>
    <li><a class="page" href="#">7</a></li>
    <li><a class="page" href="#">&raquo;</a></li>
</ul>