designsystems.one

Foundations Design Systems Frameworks DesignOps Tools

DesignSystems.One © 2025

Component Usage Guidelines

When and how to use specific components to solve common design problems

Overview Accessibility Visual Design Component Usage Code Standards Content User Experience

Button Guidelines

Button Hierarchy

Use button variants to establish a clear hierarchy of actions:

Primary Button

Limit to one primary button per section
Use for the most important action
Should be immediately visible

Secondary Button

Use for secondary actions
Can be used multiple times
Provides visual balance to primary buttons

Button Labeling

Do

Use action verbs that clearly describe what the button does
Keep labels concise (1-3 words)
Be specific about the action (e.g., "Save changes" instead of "Submit")
Use sentence case for button labels

Don't

Use vague or generic labels (e.g., "OK", "Yes")
Use technical jargon or system-oriented language
Use inconsistent capitalization
Make labels too long or too short

Button Placement

Do

Place primary actions on the right and secondary actions on the left
Maintain consistent button placement across similar screens
Group related actions together
Ensure adequate spacing between buttons to prevent mis-clicks

Don't

Place buttons inconsistently across different screens
Put too many buttons in a single section
Place destructive actions next to frequently used actions
Position buttons where users might accidentally click them

General Component Guidelines

Maintain consistency in component usage across your application
Choose the right component for the job based on user needs, not just aesthetics
Consider the context in which components will be used
Ensure all components are accessible to all users
Test components with real users to validate their effectiveness
Document component usage patterns to help maintain consistency