^{Components/Form} Button

Best Practices

Our Design System categorizes buttons by their function and visual importance: primary buttons for main actions, secondary for alternative options, and destructive for actions that require caution, such as deletions. Each type is styled distinctly to avoid user confusion and to facilitate efficient user workflows.

Dos:

• Use buttons to clearly indicate possible user actions.
• Ensure the button label is specific and descriptive of its function.
• Utilize different button styles to reflect action hierarchy.
• Maintain high contrast for text and button colors for accessibility.
• Provide visual feedback through state changes (hover, active, disabled).
• Include adequate padding around text for legibility and touch-friendliness.

Don’ts:

• Avoid cluttering interfaces with too many buttons to prevent decision fatigue.
• Do not use ambiguous labels that leave the user unsure of the action.
• Avoid using the same style for all buttons, which can lead to action ambiguity.
• Never sacrifice readability for aesthetic reasons; text must always be legible.
• Do not use disabled states without clear indication of how to enable the button.