Style Guide

DraftPen design system

Buttons

Button components with various styles and sizes

Different button styles for various use cases

Different button sizes for various contexts

Different button states including disabled and loading

Best practices for using buttons in the DraftPen interface

Use the primary button for the main action on a page or in a form
Use secondary or outline buttons for alternative actions
Limit the number of primary buttons on a page to avoid confusion
Use destructive buttons for actions that delete or remove data
Ensure button text clearly describes the action (e.g., "Save Changes" instead of "Submit")
Maintain consistent button styling throughout the application
Use appropriate button sizes based on context and importance