Buttons

btn-primary / btn-secondary



Overview

Buttons in this system follow a consistent, accessible pattern. Use .btn-primary for high-emphasis actions and .btn-secondary for lower-emphasis actions.



Base examples

Primary

Go to School of Education

Secondary

Go to School of Education

Styles

btn-primary uses --color-uvu-green with white text for high-emphasis actions. btn-secondary is an outline/low-emphasis option and adapts to theme.

btn-primary

School of Education School of Education Go to School of Education

btn-secondary

School of Education School of Education Go to School of Education

Sizes

.btn-xs – Extra small for compact UIs
btn-secondary btn-xs
.btn-sm – Small (default minimum)
btn-secondary btn-sm
.btn-md – Standard usage
btn-secondary btn-md
.btn-lg – Large / touch targets / hero
btn-secondary btn-lg
.btn-full – Fills parent width
btn-secondary btn-md btn-full

Sizes use responsive spacing and scale smoothly between breakpoints. Font sizing is driven by --fs-b-fluid (typically ~18–20px).

States

Hovers

Primary and Secondary buttons share the same hover state, some backgrounds have altered button syles for contrast purposes.



See other hover options
Quick rules
  • Navigation → use <a class="btn-*" href="...">
  • In-page action → use <button class="btn-*" type="button|submit">
  • Icons are optional and decorative aria-hidden="true" on the icon element
  • Use the governed label pattern when applicable [Action Phrase] [Target Object] [(Qualifier)]

Accessibility + Semantics

Use the right element

  • <a href="..."> for navigation (new page/route/URL)
  • <button> for actions (submit, toggle, open dialog, in-page JS)
  • Avoid role="button" on links except when repairing legacy markup you cannot change

Icon + text

  • Icons are decorative reinforcement, not meaning add aria-hidden="true"
  • Do not use icon-only buttons for primary actions
  • Keep labels short, specific, and consistent
Accessible naming (required)

Do not split the action phrase and target object into separate interactive elements. Use a single interactive element whose full visible text is the accessible name. Inline, non-interactive elements (such as <span>) are permitted inside the control for styling as long as all label text remains within the same interactive element.

Common ARIA patterns (only when needed)

Scenario Use Required Example
Navigate to another page/URL <a> Visible label text <a class="btn-primary btn-sm" href="/apply">Apply Now</a>
Triggers in-page behavior (JS) <button> type="button" (unless submit) <button class="btn-secondary btn-sm" type="button">Open Filters</button>
Opens modal / expandable region <button> aria-controls + aria-expanded (toggled) <button aria-controls="filters" aria-expanded="false">Open Filters</button>
Decorative icon <i> aria-hidden="true" <i class="icon icon--download" aria-hidden="true"></i>
Disabled link <a> aria-disabled="true" + tabindex="-1" <a aria-disabled="true" tabindex="-1">Download Catalog (PDF)</a>
External link (new tab) <a> rel="noopener noreferrer" <a target="_blank" rel="noopener noreferrer">Visit UVU Catalog</a>

Button Verb Phrase System

Use governed action phrases (label prefixes) paired with specific target objects and optional qualifiers (e.g., file type). This improves clarity, accessibility, SEO, analytics, and authoring consistency.

Canonical pattern

[Action Phrase] [Target Object] [(Object Qualifier)]

Definitions

  • Action Phrase governed verb phrase (e.g., “Download”, “Apply to”, “Register for”).
  • Target Object specific destination/item (e.g., “Course Syllabus”, “Business Program”).
  • Qualifier optional constraint metadata in parentheses (e.g., (PDF), (Fall 2026)).

Examples

  • Download Course Syllabus (PDF)
  • Apply to Business Program
  • Apply for Scholarships
  • Register for Orientation
  • Sign in to Student Portal

Rules (required)

Action phrase

  • Relational words (to, for) are part of the phrase.
  • Action phrases must match the approved list.

Target object

  • Must be specific and descriptive.
  • Avoid vague objects (“Info”, “Details”, “More”).
  • Prefer user-meaningful destinations.

Qualifier

  • Optional and must be in parentheses.
  • Use for file type or critical constraints ((PDF), (Fall 2026)).
  • Never place action words inside qualifiers.

Approved Action Phrases

Authors select the correct action phrase based on intent and pair it with a specific target object. “Apply Now” alone is reserved for the global university-wide admissions CTA.

Approved Action Phrase Use Case Example Button Text
Apply Now University-wide admissions (global primary CTA). Apply Now
Apply to Applying to a specific program, school, or department. Apply to Business Program
Apply for Applying for a benefit, resource, or opportunity. Apply for Scholarships
Download Downloading a file; include file type when known. Download Course Syllabus (PDF)
Register for Events, sessions, tours, orientations, and classes. Register for Orientation
Sign in to Authenticated destinations (portals, apply systems, tools). Sign in to Student Portal
Submit Finalizing and sending user input (forms, requests, feedback). Submit Application
Learn more about Supplemental information (not primary navigation). Learn more about Financial Aid
Explore High-level overviews of options. Explore Colleges & Schools
Browse Lists or collections of items. Browse Undergraduate Programs
View Specific result sets or detailed lists. View Academic Programs
Find Search or discovery actions. Find a Program
Go to Utility navigation to a specific page or section. Go to College of Engineering
Visit External destination / leaving the current context. Visit Campus Map
Restriction

Do not use “Learn more” by itself. Always include the object (e.g., “Learn more about Financial Aid”).

Font Awesome Icon Mapping

Each governed action phrase maps to one icon for consistency. Icons are decorative reinforcement only and must never replace text. Always apply aria-hidden="true" to the icon element.

Action Phrase Icon Font Awesome Class Intent
Apply Now icon icon--pen-to-square Global admissions CTA.
Apply to icon icon--pen-to-square Apply to a specific program/school/department.
Apply for icon icon--pen-to-square Apply for a benefit/resource/opportunity.
Download icon icon--download Download a file; include file type when known.
Register for icon icon--calendar-check Register for an event/session/orientation.
Sign in to icon icon--user-lock Authentication-required destinations.
Submit icon icon--paper-plane Send user-provided input.
Learn more about icon icon--circle-info Supplemental info (not primary navigation).
Explore icon icon--compass High-level discovery.
Browse icon--rectangle-vertical-history Browse a collection/category (lists of items; object required).
View icon icon--eye View a defined set of results/content.
Find icon icon--magnifying-glass Search/discovery action.
Go to icon icon--arrow-right Directional navigation within the site.
Visit icon icon--arrow-up-right-from-square External destination.
Go to Full Icon list

Avoid these patterns

Avoid Why Use instead
Learn more Too generic; unclear destination; weak for accessibility/SEO. Learn more about Financial Aid
Download Missing object and file type. Download Course Syllabus (PDF)
Apply Ambiguous intent. Apply to Business Program
Apply for Scholarships
Icon-only button Often fails accessibility; unclear meaning without text. Use icon + governed label text
Split action/object into separate links Creates multiple controls; breaks accessible naming. One control with the full label

Visual samples

Primary

Apply Now Apply for Scholarships Register for Orientation Explore Colleges & Schools

Secondary

Apply to Business Program Download Course Syllabus (PDF) Sign in to Student Portal Find a Program


Dark Mode - needs work

It seems that you have reduce motion enabled!