<?xml version="1.0" encoding="utf-8"?>

Differentiate primary and secondary actions

Differentiate primary and secondary actions Bad Practice
Differentiate primary and secondary actions Best Practice

Depending on the exact function and content of the card, they may contain several types of actions, most often in the form of buttons or links. Action-based elements need to preserve the card’s visual hierarchy while also being styled in a way that makes the most important actions stand out over any secondary actions.

Pro Tip: Don't neglect accessibility over visual hierarchy. Secondary buttons should be visible enough for all users.

Improve your UX & Product skills with interactive courses that actually work