DesignSystems.One LogoDesignSystems.One

Component Usage Guidelines

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

Button Guidelines

Button Hierarchy

Use button variants to establish a clear hierarchy of actions:

Primary Button
Use for the main action on a page or in a section
  • Limit to one primary button per section
  • Use for the most important action
  • Should be immediately visible
Secondary Button
Use for alternative or supporting actions
  • 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