🔘 The Button button doesn't just have "Press to Send Data"! It recognizes 20 types of buttons that are popular in Web App.

Buttons are the element that users interact with the system the most. Choosing the right type of Button not only makes them look beautiful, but also helps users understand what to press, when, and reduces the chance of crashes.

💡 What do users get?

- ✅ Choose the Button to suit each screen.

- ✅ Easier to use UX design

- ✅ clearly prioritize Action.

- ✅ Create a professional-looking UI.

🔘 20 Popular Button Types

1️⃣ Primary Button

Main buttons for the most important actions, such as Save, Submit, Checkout

2️⃣ Secondary Button

Secondary keys are used with Primary, such as Cancel or Back.

3️⃣ Tertiary Button

The third-order button is usually the Text Button for Action Secondary.

4️⃣ Filled Button

Solid Background Outstanding Vision Fits Action Important

5️⃣ Outlined Button

Only the border. The weight is second only to the Filled Button.

6️⃣ Text Button

No background. Fits links or commands that do not want to be highlighted.

7️⃣ Icon Button.

Show only icons such as 🔍 Search, ❤️ Like, ⚙️ Settings

8️⃣ Icon + Text Button

Includes icons and text. Allows quick understanding.

9️⃣ Floating Action Button (FAB)

Floater button over the screen for the main action, such as ➕ Add Data

🔟 Extended FAB

FAB with icons and text to convey the meaning more clearly.

1️⃣1️⃣ Toggle Button

Press to open and close such as Dark Mode or Notifications.

1️⃣2️⃣ Chip Button

Mini Button for Select Filter or Tag

1️⃣3️⃣ Segmented Button

Choose one option at a time, such as Daily | Weekly | Monthly.

1️⃣4️⃣ Split Button

Main button with Dropdown for more commands

1️⃣5️⃣ Dropdown Button

Press to open menu items or options.

1️⃣6️⃣ Menu Button

Open Navigation such as Hamburger Menu or Sidebar

1️⃣7️⃣ Loading Button

Displays the processing status to prevent repeated presses.

1️⃣8️⃣ Disabled Button

A button that cannot be pressed until the condition is complete.

1️⃣9️⃣ Social Button

Connect Social Login like Google, Apple, Facebook or GitHub.

2️⃣0️⃣ Danger Button.

Use with risky commands such as Delete, Remove, Reset.

🎯 UX / UI Best Practice

- Use only one Primary Button in front of the screen to avoid attention.

- Use action messages such as Save Changes instead of OK.

- Clear the color of the Danger Button from the common button.

- Display Hover, Focus, Active, Disabled and Loading status to enable users to understand system responses.

- Design button size to suit touch, especially on Mobile

- Maintain a system-wide button pattern to create a familiar experience.

💬 What type of Button do you use most often in your project? What type do you want to try to apply? Let's share it!

# CreatifyX # UXUI # UIButton # WebDesign # MobileApp

📌 Follow CreatifyX

Includes AI tools • Digital • Graphic Design • Practical Productivity, updated weekly 🚀