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>