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>