UCLA Component Library

Buttons 

<!-- Default -->
<div class="ucla campus">
    <!-- Default Button (Bare Styling) -->
    <button class="btn">
        <span>Default Button</span>
    </button>
</div>


<!-- Primary -->
<div class="ucla campus">
    <!-- Primary -->
    <button class="btn btn--lightbg">
        Primary Button
    </button>
</div>


<!-- Primary Disabled -->
<div class="ucla campus">
    <!-- Primary Disabled -->
    <button class="btn btn--lightbg" disabled>
        Primary Button Disabled
    </button>
</div>


<!-- Primary Icon -->
<div class="ucla campus">
    <!-- Primary Icon -->
    <button class="btn btn--lightbg play">
        Primary Button with Icon
    </button>
</div>


<!-- Darkbg -->
<div class="ucla campus">
    <!-- Primary Dark Background -->
    <button class="btn btn--darkbg">
        <span>Primary Dark Background Btn</span>
    </button>
</div>
<div class="ucla campus">
    <!-- Primary Dark Background -->
    <a class="btn btn--darkbg" href="#">
        Primary Dark Background Btn
    </a>
</div>


<!-- Darkbg Disabled -->
<div class="ucla campus">
    <!-- Primary Dark Background Disabled -->
    <button class="btn btn--darkbg" disabled>
        Primary Dark Background Btn Disabled
    </button>
</div>


<!-- Darkbg Icon -->
<div class="ucla campus">
    <!-- Primary Dark Background Icon -->
    <button class="btn btn--darkbg play">
        <span>Primary Dark Background Btn with Icon</span>
    </button>
</div>


<!-- Secondary -->
<div class="ucla campus">
    <!-- Secondary -->
    <button class="btn btn--secondary">
        Secondary Button
    </button>
</div>


<!-- Secondary Disabled -->
<div class="ucla campus">
    <!-- Secondary Disabled -->
    <button class="btn btn--secondary" disabled>
        Secondary Disabled
    </button>
</div>


<!-- Secondary Icon -->
<div class="ucla campus">
    <!-- Secondary Icon -->
    <button class="btn btn--secondary play">
        Secondary with Icon
    </button>
</div>


<!-- Tertiary -->
<div class="ucla campus">
    <!-- Tertiary -->
    <button class="btn btn--tertiary">
        Tertiary Button
    </button>
</div>


<!-- Tertiary Disabled -->
<div class="ucla campus">
    <!-- Tertiary Disabled -->
    <button class="btn btn--tertiary" disabled>
        Tertiary Disabled
    </button>
</div>


<!-- Tertiary Icon -->
<div class="ucla campus">
    <!-- Tertiary Icon -->
    <button class="btn btn--tertiary play">
        Tertiary with Icon
    </button>
</div>


<!-- Group -->
<div class="ucla campus">
    <!-- 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>
</div>


<!-- Group Disabled -->
<div class="ucla campus">
    <!-- 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>
</div>


<!-- Pagination -->
<div class="ucla campus">
    <!-- Pagination Boxed -->
    <ul class="pagination boxed">
        <li><a href="#">
                << /a>
        </li>
        <li><a class="current" href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">></a></li>
    </ul>

    <!-- Pagination Unboxed -->
    <ul class="pagination">
        <li><a href="#">
                << /a>
        </li>
        <li><a class="current" href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">></a></li>
    </ul>
</div>