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">Button</button>
<button class="btn btn--sm btn--tertiary icon--link">Small Button</button>
<button class="btn btn--xs btn--tertiary icon--link">Extra Small Button</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
<h2 class="mt-24">Related Links</h2>
<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)
<h2>Inline</h2>
<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>