Button Guidelines

Buttons are interactive elements used to trigger an action. They are fundamental to user interfaces and require clear design principles to ensure usability and consistency.

Button States

Understanding button states is crucial for providing visual feedback to the user.

• Default: The standard appearance of the button.
• Hover: Visual change when the user’s pointer is over the button.
• Active/Pressed: Visual change when the button is being clicked.
• Disabled: Appearance for buttons that are currently not actionable.

Button Types & Styles

We offer several button styles to accommodate different contexts and actions.

Primary Buttons

Use primary buttons for the most important action on a page, such as submitting a form or proceeding to the next step.

Secondary Buttons

Secondary buttons are used for less important actions or as alternatives to primary actions.

Danger Buttons

Danger buttons are reserved for destructive actions, such as deleting data or canceling a critical process. Use with caution.

Link Buttons

Link buttons mimic the appearance of text links but function as buttons. Useful for inline actions where a distinct button style might be too visually disruptive.

Best Practices

• Clarity: Button text should clearly describe the action.
• Hierarchy: Use primary buttons sparingly for the most critical actions.
• Consistency: Apply button styles consistently across the application.
• Placement: Position buttons logically within the user flow.
• Accessibility: Ensure sufficient color contrast and support for keyboard navigation.

For more advanced usage, refer to the Iconography Guidelines.