Buttons

<!-- Primary -->
<!-- Primary -->
<div class="mb-24" style="display:block">
    <h3>Primary Button</h3>
    <button class="btn btn--lightbg">Button</button>
    <button class="btn btn--sm btn--lightbg">Small Button</button>
    <button class="btn btn--xs btn--lightbg">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Primary Button with Leading Icon</h3>
    <button class="btn btn--lightbg icon--play">Button</button>
    <button class="btn btn--sm btn--lightbg icon--play">Small Button</button>
    <button class="btn btn--xs btn--lightbg icon--play">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Primary Button with Trailing Icon</h3>
    <button class="btn btn--lightbg icon--link">Button</button>
    <button class="btn btn--sm btn--lightbg icon--link">Small Button</button>
    <button class="btn btn--xs btn--lightbg icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Primary Button Disabled</h3>
    <button class="btn btn--lightbg" disabled>Button</button>
    <button class="btn btn--sm btn--lightbg" disabled>Small Button</button>
    <button class="btn btn--xs btn--lightbg" disabled>Extra Small Button</button>
</div>

<!-- Primary (Dark Background) -->
<div class="has-background-ucla-blue has-white-text py-24">
    <div class="mb-24" style="display:block">
        <h3>Primary Dark Background Button</h3>
        <button class="btn btn--darkbg">Button</button>
        <button class="btn btn--sm btn--darkbg">Small Button</button>
        <button class="btn btn--xs btn--darkbg">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Primary Dark Background Button with Leading Icon</h3>
        <button class="btn btn--darkbg icon--play">Button</button>
        <button class="btn btn--sm btn--darkbg icon--play">Small Button</button>
        <button class="btn btn--xs btn--darkbg icon--play">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Primary Dark Background Button with Trailing Icon</h3>
        <button class="btn btn--darkbg icon--link">Button</button>
        <button class="btn btn--sm btn--darkbg icon--link">Small Button</button>
        <button class="btn btn--xs btn--darkbg icon--link">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Primary Dark Background Button Disabled</h3>
        <button class="btn btn--darkbg" disabled>Button</button>
        <button class="btn btn--sm btn--darkbg" disabled>Small Button</button>
        <button class="btn btn--xs btn--darkbg" disabled>Extra Small Button</button>
    </div>
</div>

<!-- Secondary -->
<!-- Secondary -->
<div class="mb-24" style="display:block">
    <h3>Secondary Button</h3>
    <button class="btn btn--secondary--lightbg">Button</button>
    <button class="btn btn--sm btn--secondary--lightbg">Small Button</button>
    <button class="btn btn--xs btn--secondary--lightbg">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Secondary Button with Leading Icon</h3>
    <button class="btn btn--secondary--lightbg icon--play">Button</button>
    <button class="btn btn--sm btn--secondary--lightbg icon--play">Small Button</button>
    <button class="btn btn--xs btn--secondary--lightbg icon--play">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Secondary Button with Trailing Icon</h3>
    <button class="btn btn--secondary--lightbg icon--link">Button</button>
    <button class="btn btn--sm btn--secondary--lightbg icon--link">Small Button</button>
    <button class="btn btn--xs btn--secondary--lightbg icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Secondary Button Disabled</h3>
    <button class="btn btn--secondary--lightbg" disabled>Button</button>
    <button class="btn btn--sm btn--secondary--lightbg" disabled>Small Button</button>
    <button class="btn btn--xs btn--secondary--lightbg" disabled>Extra Small Button</button>
</div>

<!-- Secondary (Dark Background) -->
<div class="has-background-ucla-blue has-white-text py-24">
    <div class="mb-24" style="display:block">
        <h3>Secondary Button w/ Dark Background</h3>
        <button class="btn btn--secondary--darkbg">Button</button>
        <button class="btn btn--sm btn--secondary--darkbg">Small Button</button>
        <button class="btn btn--xs btn--secondary--darkbg">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Secondary Dark Background Button with Leading Icon</h3>
        <button class="btn btn--secondary--darkbg icon--play">Button</button>
        <button class="btn btn--sm btn--secondary--darkbg icon--play">Small Button</button>
        <button class="btn btn--xs btn--secondary--darkbg icon--play">Small Button</button>
    </div>

    <div class="mb-24" style="display:block">
        <h3>Secondary Dark Background Button with Trailing Icon</h3>
        <button class="btn btn--secondary--darkbg icon--link">Button</button>
        <button class="btn btn--sm btn--secondary--darkbg icon--link">Small Button</button>
        <button class="btn btn--xs btn--secondary--darkbg icon--link">Extra Small Button</button>
    </div>

    <div class="mb-24" style="display:block">
        <h3>Secondary Dark Background Button Disabled</h3>
        <button class="btn btn--secondary--darkbg" disabled>Button</button>
        <button class="btn btn--sm btn--secondary--darkbg" disabled>Small Button</button>
        <button class="btn btn--xs btn--secondary--darkbg" disabled>Extra Small Button</button>
    </div>
</div>

<!-- Tertiary -->
<!-- Tertiary -->
<div class="mb-24" style="display:block">
    <h3>Tertiary Button</h3>
    <button class="btn btn--tertiary">Button</button>
    <button class="btn btn--sm btn--tertiary">Small Button</button>
    <button class="btn btn--xs btn--tertiary">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Tertiary Button with Leading Icon</h3>
    <button class="btn btn--tertiary icon--play">Button</button>
    <button class="btn btn--sm btn--tertiary icon--play">Small Button</button>
    <button class="btn btn--xs btn--tertiary icon--play">Extra Small Button</button>
</div>

<div class="mb-24" style="display:block">
    <h3>Tertiary Button with Trailing Icon</h3>
    <button class="btn btn--tertiary icon--link">Button</button>
    <button class="btn btn--sm btn--tertiary icon--link">Small Button</button>
    <button class="btn btn--xs btn--tertiary icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Tertiary Button Disabled</h3>
    <button class="btn btn--tertiary" disabled>Button</button>
    <button class="btn btn--sm btn--tertiary" disabled>Small Button</button>
    <button class="btn btn--xs btn--tertiary" disabled>Extra Small Button</button>
</div>

<!-- Tertiary (Dark Background)-->
<div class="has-background-ucla-blue has-white-text py-24">
    <div class="mb-24" style="display:block">
        <h3>Tertiary Dark Background Button</h3>
        <button class="btn btn--tertiary--darkbg">Button</button>
        <button class="btn btn--sm btn--tertiary--darkbg">Small Button</button>
        <button class="btn btn--xs btn--tertiary--darkbg">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Tertiary Dark Background Button with Leading Icon</h3>
        <button class="btn btn--tertiary--darkbg icon--play">Button</button>
        <button class="btn btn--sm btn--tertiary--darkbg icon--play">Small Button</button>
        <button class="btn btn--xs btn--tertiary--darkbg icon--play">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Tertiary Dark Background Button with Trailing Icon</h3>
        <button class="btn btn--tertiary--darkbg icon--link">Button</button>
        <button class="btn btn--sm btn--tertiary--darkbg icon--link">Small Button</button>
        <button class="btn btn--xs btn--tertiary--darkbg icon--link">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Tertiary Dark Background Button Disabled</h3>
        <button class="btn btn--tertiary--darkbg" disabled>Button</button>
        <button class="btn btn--sm btn--tertiary--darkbg" disabled>Small Button</button>
        <button class="btn btn--xs btn--tertiary--darkbg" disabled>Extra Small Button</button>
    </div>
</div>

<!-- Group -->
<!-- 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>

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

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

<!-- Pagination -->
<!-- Pagination (Boxed) -->
<nav aria-label="Pagination">
    <ul class="pagination--boxed">
        <li><a class="page" href="#" aria-label="Previous"><span class="pagination-prev"></span></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="#" aria-label="Next"><span class="pagination-next"></span></a></li>
    </ul>
</nav>

<!-- Pagination (Unboxed) -->
<nav aria-label="Pagination">
    <ul class="pagination">
        <li><a class="page" href="#"><span class="pagination-prev"></span></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="#"><span class="pagination-next"></span></a></li>
    </ul>
</nav>