Overview
Buttons in this system follow one shared structure with two main visual styles.
Use .btn-primary for higher-emphasis actions and .btn-secondary for lower-emphasis actions.
The current CSS in css/components/wg-buttons.css gives both button types the same layout, spacing, border width,
icon alignment, and hover behavior. The visual difference comes from the background and text color treatment.
Base examples
Primary
Go to School of EducationSecondary
Go to School of EducationStyles
btn-primary uses --color-uvu-green with white text for high-emphasis actions.
btn-secondary uses an off-white fill with UVU green text and border for lower-emphasis actions.
Both styles use the same base border width, radius, spacing, font family, and icon alignment. Both also switch to the same hover treatment in the current CSS.
Sizes
.btn-xs – Extra small for compact UIs
.btn-sm – Small
.btn-md – Standard usage
.btn-lg – Large / stronger touch target / hero use
.btn-full – Fills the parent width with text left and icon pushed right
Size classes set the shared --btn-size token. In the current CSS:
.btn-xs uses --space-xxs,
.btn-sm uses --space-xs,
.btn-md uses --space-sm,
and .btn-lg uses --space-md.
States
Hover
Primary and Secondary buttons share the same hover state in the current CSS. Both switch to Wolverine green with white text.
See other hover options
Focus
Buttons use a visible :focus-visible outline. This must remain visible and should never be removed.
outline: 3px solid #ffcc00;
- Navigation → use
<a class="btn-*" href="..."> - In-page action → use
<button class="btn-*" type="button|submit"> - Icons are optional and decorative: set
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 to a new page, route, or URL
- <button> for actions such as submit, toggle, open dialog, or in-page behavior
- Avoid
role="button"on links except when repairing legacy markup you cannot change
Icon + text
- Icons are decorative reinforcement, not the meaning
- Add
aria-hidden="true"to decorative icons - Do not use icon-only buttons for primary actions
- Keep labels short, specific, and consistent
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 allowed for styling as long as all label text stays inside the same interactive element.
Common ARIA patterns (only when needed)
| Scenario | Use | Required | Example |
|---|---|---|---|
| Navigate to another page or URL | <a> |
Visible label text | <a class="btn-primary btn-sm" href="/apply">Apply Now</a> |
| Triggers in-page behavior | <button> |
type="button" unless submit |
<button class="btn-secondary btn-sm" type="button">Open Filters</button> |
| Opens modal or expandable region | <button> |
aria-controls + aria-expanded when toggled |
<button aria-controls="filters" aria-expanded="false" type="button">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 href="#" aria-disabled="true" tabindex="-1">Download Catalog (PDF)</a> |
| External link opening a new tab | <a> |
rel="noopener noreferrer" |
<a target="_blank" rel="noopener noreferrer">Visit UVU Catalog</a> |
Opening New Tabs vs. Staying on the Page
Links should help people stay oriented. The default rule is simple: if the link stays within the same site folder or section, open it in the same tab. If the link sends people to a different site, service, form, portal, or channel, open it in a new tab.
Stay in the same tab
Use the same tab when the person is still moving through the same site, section, or content path.
- Same department or school site
- Same guide or content folder
- Related pages that continue the same task
- Clear links that do not interrupt the current flow
Open in a new tab
Use a new tab when the link changes context or sends the person into a separate system.
- External websites
- Forms, applications, or service portals
- Payment, registration, or scheduling systems
- Any link where the person may need to return to the current page
When link text is clear, the tab behavior can follow the destination. When link text is vague and people may not realize they are leaving the current site or entering another service, open the link in a new tab so they have a clear path back.
Decision guide
| Link destination | Tab behavior | Button or link label guidance |
|---|---|---|
| Same site, same folder, or same section | Same tab | Use a clear label that describes the next page. |
| Another UVU site, office, or department | Usually same tab unless it changes the task flow | Make the destination clear in the label. |
| External website | New tab | Name the destination or action clearly. |
| Form, portal, application, scheduler, or service tool | New tab | Use action words like Submit, Apply, Schedule, Register, or Request. |
| Unclear destination or weak link text | New tab | Improve the label when possible. Until then, protect the user’s place. |
Markup examples
Same tab
Use a normal link when the destination stays in the current site path.
View Advising RequirementsNew tab
Use target="_blank" and rel="noopener" for outside services or context changes.
Button Verb Phrase System
Use governed action phrases paired with specific target objects and optional qualifiers such as file type. This improves clarity, accessibility, SEO, analytics, and authoring consistency.
[Action Phrase] [Target Object] [(Object Qualifier)]
Definitions
- Action Phrase governed verb phrase such as “Download”, “Apply to”, or “Register for”
- Target Object specific destination or item such as “Course Syllabus” or “Business Program”
- Qualifier optional metadata in parentheses such as
(PDF)or(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 like to and for are part of the phrase
- Action phrases must match the approved list
Target object
- Must be specific and descriptive
- Avoid vague objects like “Info”, “Details”, or “More”
- Prefer user-meaningful destinations
Qualifier
- Optional and placed in parentheses
- Use for file type or critical constraints such as
(PDF)or(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 such as portals, apply systems, and tools | Sign in to Student Portal |
| Submit | Finalizing and sending user input such as forms, requests, and 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 or leaving the current context | Visit Campus Map |
Do not use “Learn more” by itself. Always include the object, such as “Learn more about Financial Aid”.
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 | Icon 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, or department | |
| Apply for | icon icon--pen-to-square |
Apply for a benefit, resource, or opportunity | |
| Download | icon icon--download |
Download a file; include file type when known | |
| Register for | icon icon--calendar-check |
Register for an event, session, or orientation | |
| Sign in to | icon icon--user-lock |
Authentication-required destination | |
| Submit | icon icon--paper-plane |
Send user-provided input | |
| Learn more about | icon icon--circle-info |
Supplemental information, not primary navigation | |
| Explore | icon icon--compass |
High-level discovery | |
| Browse | icon icon--rectangle-vertical-history |
Browse a collection or category | |
| View | icon icon--eye |
View a defined set of results or content | |
| Find | icon icon--magnifying-glass |
Search or discovery action | |
| Go to | icon icon--arrow-right |
Directional navigation within the site | |
| Visit | icon icon--arrow-up-right-from-square |
External destination |
Avoid these patterns
| Avoid | Why | Use instead |
|---|---|---|
| Learn more | Too generic, unclear destination, weak for accessibility and 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 and creates unclear meaning without text | Use icon + governed label text |
| Split action and object into separate links | Creates multiple controls and breaks accessible naming | One control with the full label |
Visual samples
It seems that you have reduce motion enabled!