UCLA Component Library

Buttons 

<!-- Default -->
<button class="btn">
    <span>Default Button</span>
</button>
<br><br>


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


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


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

<br><br>


<!-- Darkbg -->
<button class="btn btn--darkbg">
    <span>Primary Dark Background Btn</span>
</button>


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


<!-- Darkbg Icon -->
<!-- For usage with Dark Backgrounds -->
<button class="btn btn--darkbg play">
    <span>Primary Dark Background Btn with Icon</span>
</button>
<br><br>


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


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


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

<br><br>


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


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


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

<br><br>


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

<br>


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

<!-- unboxed pagination -->
<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>