Choosing a CTA Type

There are a few different ways to link calls to action (CTAs) across Aggie UX components, most notably buttons, CTA links and linked headings. When choosing which type of CTA to use in a given component, it is important to let the content inform your decision.

Because CTAs are links, it is critical to write accessible link text.

Buttons

Choose buttons when you have short, action-oriented calls to action.

Buttons are the most visually dominant way to incorporate a call to action (CTA) into a component. Because of their design, buttons are best suited to short CTAs, typically one-to-three words. Longer CTAs can stretch a button to where it is no longer recognizable as a clickable element.

Typically Aggie UX components only allow for one or two buttons within a given space. Crowding more buttons than that into a small area can make it difficult for users to take in all of the possible actions and make the correct choice.

CTA Links

Choose CTA links for longer calls to action.

CTA links are stand-alone links (as opposed to links within a paragraph) that typically have a leading or trailing icon and are slightly larger than standard body text. CTA links can be used alone or in a list, depending on the component.

CTA links are best used for medium or long CTAs or listing multiple CTAs in a smaller space.

Linked Headings

Choose linked headings when the headings match the link destination.

Linked headings are exactly what the name implies — headings within a component that are linked to another destination. This option is best used when the heading text matches (or nearly matches) the H1 heading on the page it links to.