Buttons
Report an Issue
Join the Slack Discussion
Buttons draw attention to important actions, content or next steps. Button tags, <button>, are used for internal page 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
Information Scent: How Users Decide Where to Go Next (Nielsen Norman Group)
Writing Hyperlinks: Salient, Descriptive, Start with Keyword (Nielsen Norman Group)
Learn More Links: You Can Do Better (Nielsen Norman Group)
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.
Code Guidance
- Be sure to include the minimum parent class “ucla” in the containers for your links. This will allow the element to inherit default link styles.
- Adding the “campus” classname will allow for grid layout.
Further Reading
- ARIA button role (Mozilla)
- ARIA button role (W3)
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 -->
<div class="mb-24" style="display:block">
<h3>Primary Button</h3>
<button class="btn btn--lightbg">Button</button>
<button class="btn btn--sm btn--lightbg">Small Button</button>
<button class="btn btn--xs btn--lightbg">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Primary Button with Leading Icon</h3>
<button class="btn btn--lightbg icon--play">Button</button>
<button class="btn btn--sm btn--lightbg icon--play">Small Button</button>
<button class="btn btn--xs btn--lightbg icon--play">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Primary Button with Trailing Icon</h3>
<button class="btn btn--lightbg icon--link">Button</button>
<button class="btn btn--sm btn--lightbg icon--link">Small Button</button>
<button class="btn btn--xs btn--lightbg icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Primary Button Disabled</h3>
<button class="btn btn--lightbg" disabled>Button</button>
<button class="btn btn--sm btn--lightbg" disabled>Small Button</button>
<button class="btn btn--xs btn--lightbg" disabled>Extra Small Button</button>
</div>
<!-- Primary (Dark Background) -->
<div class="has-background-ucla-blue has-white-text py-24">
<div class="mb-24" style="display:block">
<h3>Primary Dark Background Button</h3>
<button class="btn btn--darkbg">Button</button>
<button class="btn btn--sm btn--darkbg">Small Button</button>
<button class="btn btn--xs btn--darkbg">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Primary Dark Background Button with Leading Icon</h3>
<button class="btn btn--darkbg icon--play">Button</button>
<button class="btn btn--sm btn--darkbg icon--play">Small Button</button>
<button class="btn btn--xs btn--darkbg icon--play">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Primary Dark Background Button with Trailing Icon</h3>
<button class="btn btn--darkbg icon--link">Button</button>
<button class="btn btn--sm btn--darkbg icon--link">Small Button</button>
<button class="btn btn--xs btn--darkbg icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Primary Dark Background Button Disabled</h3>
<button class="btn btn--darkbg" disabled>Button</button>
<button class="btn btn--sm btn--darkbg" disabled>Small Button</button>
<button class="btn btn--xs btn--darkbg" disabled>Extra Small Button</button>
</div>
</div>Secondary Button
Code
<!-- Secondary -->
<div class="mb-24" style="display:block">
<h3>Secondary Button</h3>
<button class="btn btn--secondary--lightbg">Button</button>
<button class="btn btn--sm btn--secondary--lightbg">Small Button</button>
<button class="btn btn--xs btn--secondary--lightbg">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Secondary Button with Leading Icon</h3>
<button class="btn btn--secondary--lightbg icon--play">Button</button>
<button class="btn btn--sm btn--secondary--lightbg icon--play">Small Button</button>
<button class="btn btn--xs btn--secondary--lightbg icon--play">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Secondary Button with Trailing Icon</h3>
<button class="btn btn--secondary--lightbg icon--link">Button</button>
<button class="btn btn--sm btn--secondary--lightbg icon--link">Small Button</button>
<button class="btn btn--xs btn--secondary--lightbg icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Secondary Button Disabled</h3>
<button class="btn btn--secondary--lightbg" disabled>Button</button>
<button class="btn btn--sm btn--secondary--lightbg" disabled>Small Button</button>
<button class="btn btn--xs btn--secondary--lightbg" disabled>Extra Small Button</button>
</div>
<!-- Secondary (Dark Background) -->
<div class="has-background-ucla-blue has-white-text py-24">
<div class="mb-24" style="display:block">
<h3>Secondary Button w/ Dark Background</h3>
<button class="btn btn--secondary--darkbg">Button</button>
<button class="btn btn--sm btn--secondary--darkbg">Small Button</button>
<button class="btn btn--xs btn--secondary--darkbg">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Secondary Dark Background Button with Leading Icon</h3>
<button class="btn btn--secondary--darkbg icon--play">Button</button>
<button class="btn btn--sm btn--secondary--darkbg icon--play">Small Button</button>
<button class="btn btn--xs btn--secondary--darkbg icon--play">Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Secondary Dark Background Button with Trailing Icon</h3>
<button class="btn btn--secondary--darkbg icon--link">Button</button>
<button class="btn btn--sm btn--secondary--darkbg icon--link">Small Button</button>
<button class="btn btn--xs btn--secondary--darkbg icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Secondary Dark Background Button Disabled</h3>
<button class="btn btn--secondary--darkbg" disabled>Button</button>
<button class="btn btn--sm btn--secondary--darkbg" disabled>Small Button</button>
<button class="btn btn--xs btn--secondary--darkbg" disabled>Extra Small Button</button>
</div>
</div>
Tertiary Button
Code
<!-- Tertiary -->
<div class="mb-24" style="display:block">
<h3>Tertiary Button</h3>
<button class="btn btn--tertiary">Button</button>
<button class="btn btn--sm btn--tertiary">Small Button</button>
<button class="btn btn--xs btn--tertiary">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Tertiary Button with Leading Icon</h3>
<button class="btn btn--tertiary icon--play">Button</button>
<button class="btn btn--sm btn--tertiary icon--play">Small Button</button>
<button class="btn btn--xs btn--tertiary icon--play">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Tertiary Button with Trailing Icon</h3>
<button class="btn btn--tertiary icon--link">Tertiary Button with Trailing Icon</button>
<button class="btn btn--sm btn--tertiary icon--link">Small Tertiary Button with Trailing Icon</button>
<button class="btn btn--xs btn--tertiary icon--link">Extra Small Tertiary Button with Trailing Icon</button>
</div>
<div class="mb-24" style="display:block">
<h3>Tertiary Button Disabled</h3>
<button class="btn btn--tertiary" disabled>Button</button>
<button class="btn btn--sm btn--tertiary" disabled>Small Button</button>
<button class="btn btn--xs btn--tertiary" disabled>Extra Small Button</button>
</div>
<!-- Tertiary (Dark Background)-->
<div class="has-background-ucla-blue has-white-text py-24">
<div class="mb-24" style="display:block">
<h3>Tertiary Dark Background Button</h3>
<button class="btn btn--tertiary--darkbg">Button</button>
<button class="btn btn--sm btn--tertiary--darkbg">Small Button</button>
<button class="btn btn--xs btn--tertiary--darkbg">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Tertiary Dark Background Button with Leading Icon</h3>
<button class="btn btn--tertiary--darkbg icon--play">Button</button>
<button class="btn btn--sm btn--tertiary--darkbg icon--play">Small Button</button>
<button class="btn btn--xs btn--tertiary--darkbg icon--play">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Tertiary Dark Background Button with Trailing Icon</h3>
<button class="btn btn--tertiary--darkbg icon--link">Button</button>
<button class="btn btn--sm btn--tertiary--darkbg icon--link">Small Button</button>
<button class="btn btn--xs btn--tertiary--darkbg icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
<h3>Tertiary Dark Background Button Disabled</h3>
<button class="btn btn--tertiary--darkbg" disabled>Button</button>
<button class="btn btn--sm btn--tertiary--darkbg" disabled>Small Button</button>
<button class="btn btn--xs btn--tertiary--darkbg" disabled>Extra Small Button</button>
</div>
</div>Button Group
Code
<!-- 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>
<!-- Small Button Group -->
<div class="btn--group">
<button class="btn btn--sm btn--group-left">Small Group - Left (Req)</button>
<button class="btn btn--sm btn--group-center">Small Group - Center (Optional)</button>
<button class="btn btn--sm btn--group-right">Small Group - Right (Req)</button>
</div>
<!-- Button Group (Disabled) -->
<div class="btn--group">
<button class="btn btn--sm btn--group-left" disabled>Small Group - Disabled Left (Req)</button>
<button class="btn btn--sm btn--group-center" disabled>Small Group - Disabled Center (Optional)</button>
<button class="btn btn--sm btn--group-right" disabled>Small Group - Disabled Right (Req)</button>
</div>Links
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>- Link (required)
- 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>
Pagination Button
Code
<!-- Pagination (Boxed) -->
<nav aria-label="Pagination">
<ul class="pagination--boxed">
<li><a class="page" href="#" aria-label="Previous"><span class="pagination-prev"></span></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="#" aria-label="Next"><span class="pagination-next"></span></a></li>
</ul>
</nav>
<!-- Pagination (Unboxed) -->
<nav aria-label="Pagination">
<ul class="pagination">
<li><a class="page" href="#"><span class="pagination-prev"></span></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="#"><span class="pagination-next"></span></a></li>
</ul>
</nav>