Button
Hierarchy
Visual hierarchy helps to distinguish the relevancy of the actions. Preserve given styles to any button such as text, color, or sizes. Do not enforce custom modifications.
Button currently supports 3 different hierarchies: primary, secondary, tertiary and destructive
Content
Start with a verb.
Avoid all-caps or other text formats.
Use sentence case, capitalize the first letter of the first word.
Use clear labels, they must indicate the purpose of the action or what happens next.
Use a few words ideally 1 or 2.
Avoid using first person pronouns like ‘me’, ‘my’ and ‘I’.
“My” vs. “You” (Eliminate if possible) If already referring to user as “My,” stay consistent.
Accessibility
Labels must be visible enough, don't use text sizes smaller than 14px.
Avoid long labels, as they risk to overflow and blocking its readability.
Last updated
Was this helpful?