Skip to content

[ Builder UI ] Enhanced Keyboard Shortcut for Add Component Button Improvement #18158

@NDCallahan

Description

@NDCallahan

🧩 Feature: Enhanced Keyboard Shortcut + Add Component Button Improvements

📝 Description

The CTRL/CMD + ENTER keyboard shortcut currently opens the Add Component modal in the builder. However, once the modal is open, pressing the shortcut again does nothing. Enhancing this shortcut to also close the modal would create a smoother, more intuitive workflow and reduce the need to move the mouse during rapid component creation.

Additionally, the (+) Add Component button does not currently provide a tooltip, and when the modal is open, the button remains visually static. Adding a tooltip and optionally highlighting or surfacing the button when the modal is open would improve discoverability and UX clarity.


💡 Use Case

As a Budibase user, I want to:

  • Use CTRL/CMD + ENTER as a true toggle to both open and close the Add Component modal.
  • Quickly dismiss the modal without needing to click outside or move the mouse.
  • See a tooltip on the (+) Add Component button for better clarity and accessibility.
  • Optionally have the (+) button visually surface or highlight when the modal is open, making it easier to understand the relationship between the button and the modal.

🔍 Current Pain Points

  • The keyboard shortcut only opens the modal; it does not close it.
  • Requires unnecessary mouse movement to dismiss the modal.
  • The (+) Add Component button has no tooltip, reducing clarity for new users.
  • No visual indication that the modal is tied to the (+) button.
  • Slightly reduces workflow speed for power users who rely on keyboard shortcuts.

🎯 Expected Behavior

  • Pressing CTRL/CMD + ENTER when the Add Component modal is open should close it.
  • The (+) Add Component button should display a tooltip such as:
    • “Add Component”
    • “Open Component Library”
  • (Optional) When the modal is open, the (+) button could:
    • Highlight
    • Pulse
    • Or visually surface in a subtle way
      to reinforce the connection between the button and the modal.

🚀 Why It Matters

  • Improves builder efficiency and reduces friction during rapid UI creation.
  • Makes the Add Component workflow more intuitive and consistent with toggle‑style shortcuts.
  • Enhances accessibility and discoverability for new users.
  • Adds polish and clarity to the builder interface.

📸 Screenshots

Image Image ---

📌 Additional Notes

  • The optional visual highlight for the (+) button is not required but would add a nice UX touch.
  • This enhancement aligns with other builder keyboard‑shortcut improvements and supports a smoother creation workflow.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions