Types of buttons in UI design

In UI design, there are two main types of buttons: principal buttons and additional buttons. Principal buttons are further divided into primary, secondary, tertiary (or ghost), and icon buttons.

Principal buttons

Primary button

• Executes the most important actions
• Bold visual design
• Examples: Pay, submit, delete

Secondary button

• Executes actions less important than primary buttons
• Can appear multiple times on the interface
• Less bold visual design than primary buttons

Tertiary or ghost button

• Used for less important tasks
• Eye-catching design, usually circular with an icon
• Serves as a shortcut for main actions

Icon button

• Used when there isn't enough space for a labeled button
• Varies in corner radius based on visual design
• Examples: Download button, FAB

Button label

• Label on the button explains the action
• Color can indicate action importance (e.g., red for Delete, green for Save)
• Primary buttons have a full background for emphasis

Hover (highlighted)

• Button changes color or shows interaction on hover
• Button height should be taller than the text label

Button accessibility

• Design buttons for easy interaction by all users
• Create a clear hierarchy with a minimal number of button types for easy navigation

Overall, understanding the different types of buttons and their design principles can help create a functional and user-friendly interface.