CTA Button

Design File

Figma link

Overview

The Call-to-Action (CTA) Button is a primary interface element designed to prompt users to take specific, important actions. This component should be used exclusively for interactive elements that trigger an action, not for navigation links.

Usage

When to Use

• For primary actions that submit data or trigger processes
• When you need to draw attention to the most important action on a page
• For actions that change state or perform operations

When NOT to Use

• For links - use the Emphasized Link component instead

Implementation

The button is a ready-made base class in css/base.css — you do not compose it from utility classes, and there is no button component. Apply the classes to a <button> element:

Classes	Result
class="umd-lib button"	Primary — white text on Maryland red, with hover and [disabled] states
class="umd-lib button secondary"	Secondary — outlined variant, with [disabled] states

This is the one place the design system ships a finished, self-contained class instead of composable utilities. For developers, see Design Tokens and Utility Classes and Building a Component.

Component Relationships

Button Variants in the Default UMD Design System

• CTA Button (Primary): Uses the Primary Button style from the UMD Design System for <button> elements
• Emphasized Link: Replaces the Secondary Button style for <a> elements to maintain semantic HTML

This separation ensures proper distinction between actions (buttons) and navigation (links).

Related Components

• Emphasized Link: For navigation/link that needs visual prominence
• Link: For inline link within content