UCLA Component Library

Buttons

bitbucket Report an Issue Slack Join the Slack Discussion

Buttons draw attention to important actions, content or next steps. Button tags, <button>, are used for internal pages actions. Links, or <a> tags, are used for linking to an external page.

Usage


  • Write succinct and specific button text. You can elaborate more with inline text links.
  • Begin primary or call-to-action buttons with a verb if you want people to complete a task.
  • For longer inline text links, use descriptive language in place of generic links like “Learn More“ or “Click Here”.
  • Front-load meaningful keywords in longer, tertiary links or text-only buttons.

Further Reading

Code

Buttons

If your button links to another page, use the anchor element.

<a class="btn" href=""></a>
<button class="btn"></button>

If your button submits a form, use the input element.

<input class="btn" type="submit"></input>

If your button controls interaction within a page, use the button element with appropriate ARIA roles or states.

<button class="btn" aria-pressed="false"></button>

Span wrapper that represents self-contained content.

<span class="btn-span">Button Copy</span>

Primary Button

Do’s and Don’ts

Do’s

  • Do use only one primary button per section of content.
  • Do group primary buttons with secondary buttons or tertiary buttons.

Don’ts

  • Don’t change the color of buttons or button labels.
  • Don’t group more than one primary button together.

Anatomy

Code

<!-- Primary -->
<button class="btn btn--lightbg">Primary Button</button>
<button class="btn btn--lightbg icon--play">Primary Button with Leading Icon</button>
<button class="btn btn--lightbg icon--link">Primary Button with Trailing Icon</button>
<button class="btn btn--lightbg" disabled>Primary Button Disabled</button>

<!-- Primary (Dark Background) -->
<div class="has-background-ucla-blue">
  <button class="btn btn--darkbg">Primary Dark Background button</button>
  <button class="btn btn--darkbg icon--play">Primary Dark Background Btn with Leading Icon</button>
  <button class="btn btn--darkbg icon--link">Primary Dark Background Btn with Trailing Icon</button>
  <button class="btn btn--darkbg" disabled>Primary Dark Background Btn Disabled</button>
</div>

Secondary Button

<!-- Secondary -->
<button class="btn btn--secondary--lightbg">Secondary Button</button>
<button class="btn btn--secondary--lightbg icon--play">Secondary with Icon</button>
<button class="btn btn--secondary--lightbg icon--link">Secondary with Link</button>
<button class="btn btn--secondary--lightbg" disabled>Secondary Disabled</button>


<!-- Secondary (Dark Background) -->
<div class="has-background-ucla-blue    ">
  <button class="btn btn--secondary--darkbg">Secondary Dark Background Button</button>
  <button class="btn btn--secondary--darkbg icon--play">Secondary Dark Background with Icon</button>
  <button class="btn btn--secondary--darkbg icon--link">Secondary Dark Background with Link</button>
  <button class="btn btn--secondary--darkbg" disabled>Secondary Dark Background Disabled</button>
</div>

<!-- Tertiary -->
<button class="btn btn--tertiary">Tertiary Button</button>
<button class="btn btn--tertiary icon--play">Tertiary with Icon</button>
<button class="btn btn--tertiary" disabled>Tertiary Disabled</button>

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

Code

<div class="ucla">
  <!-- Related Links -->
  <ul class="related-links">
    <li><a href="#">This is an Internal Link</a></li>
    <li><a class="related-links--external" href="#">This is an External Link</a></li>
    <li><a class="related-links--download" href="#">This is a Link to a Download (PDF)</a></li>
  </ul>
</div>
  1. Link (required)
  2. Container (on hover and active states only)
<div class="ucla">
  <!-- Inline Link (Light Background) -->
  <p>
    This is an example of an <a href="#">inline</a> link on light background.
  </p>

  <!-- Inline Link (Dark Background) -->
  <p style="background: #2774AE; color: white;">
    This is an example of an <a class="white-link" href="#">inline</a> link on dark background.
  </p>

  <br>
</div>

Code

<!-- Pagination (Boxed) -->
<ul class="pagination--boxed">
  <li><a class="page" href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

<!-- Pagination (Unboxed) -->
<ul class="pagination">
  <li><a class="page" href="#">&laquo;</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="#">&raquo;</a></li>
</ul>