UCLA Component Library

Buttons And Links

Buttons and Links

Buttons draw attention to important actions, content or next steps

Usage

Usability Guidance

  • 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

Accessibility Requirements

  • Write button labels so they make sense without reading the copy around them so they are accessible to screen readers.
  • Don’t write button labels that are generic or not specific to the content being presented.
  • Avoid more than one instance of generic text like “Read More”. Screen readers can’t disambiguate multiple buttons with the same or similar text.
  • Do use the button color scheme provided. It is ADA compliant.
  • Link headlines in Story Cards or Event Cards rather than adding buttons with generic text.

Further Reading

Code

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

<a href=""></a>

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

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

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

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

Line by Line

Button wrapper that represents self-contained content.

<button class="btn"><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

Primary Button Anatomy Image
  1. Button Label (required)
  2. Container (required)
  3. Leading Icon (optional)
  4. Trailing Icon (optional)

Interactive States

Primary Button Interactive States Image

Specs

Primary Button Types Specs Image Primary Button Light Background Specs Image Primary Button Types Dark Background Specs Image

Code

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

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

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

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

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

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

Anatomy

Secondary Button Anatomy Image
  1. Button Label (required)
  2. Container (required)
  3. Leading Icon (optional)
  4. Trailing Icon (optional)

Interactive States

Secondary Button Interactive States Image

Specs

Secondary Button States Specs Image Secondary Button Variations Specs Image

Code

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

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

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

Tertiary Button

Anatomy

Tertiary Button Anatomy Image
  1. Button Label (required)
  2. Container (required)
  3. Leading Icon (optional)
  4. Trailing Icon (optional)

Interactive States

Tertiary Button Interactive States Image

Specs

Tertiary Button States Specs Image Tertiary Button Variations Specs Image

Code

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

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

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

Button Group

Anatomy

Button Group Anatomy Image
  1. Left Button (required)
  2. Center Button (optional)
  3. Right Button (required)

States

Button Group States Image

Specs

Button Group Specs Image

Code

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

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

Anatomy

Related Links Anatomy Image
  1. Button Label (required)
  2. Icon (optional)
  3. Container (required)

States

Related Links States Image

Specs

Related Links Specs Image

Code

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

Inline Text Links

Anatomy

Inline Text Links Anatomy Image
  1. Link (required)
  2. Container (on hover and active states only)

States

Inline Text Links States Image

Specs

Inline Text Links Specs Image

Color Variations

Inline Text Variations Image

Code

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

Pagination

Anatomy

Pagination Anatomy Image
  1. Previous Page (required)
  2. Current Page Item (required)
  3. Page Item (required)
  4. Next Page (required)

States

Pagination States Image

Variations

Pagination Variations Image

Specs

Pagination Specs Image

Code

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