# 2D GUI and Actions

**URL:** <https://forum.babylonjs.com/t/2d-gui-and-actions/6513>\
**Category:** Questions\
**Created:** [October 22, 2019, 7:12pm UTC](https://forum.babylonjs.com/t/2d-gui-and-actions/6513 "2019-10-22T19:12:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![khkannisto](https://avatars.discourse-cdn.com/v4/letter/k/b38774/32.png) [@khkannisto](https://forum.babylonjs.com/u/khkannisto)\
**Post date:** [October 22, 2019, 7:12pm UTC](https://forum.babylonjs.com/t/2d-gui-and-actions/6513/1 "2019-10-22T19:12:54Z")

</div>

Noobie question. Is it possible to combine the 2D GUI buttons with mouse actions on meshes? I get that (at least in default case) the GUI intercepts clicks. But is it possible for the 2D GUI to intercept only when a button area is clicked and let other clicks (that are not over any button) to pass through to the mesh objects?

---

<div class="post-metadata">

**Author:** ![Drigax](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drigax/32/16585_2.png) [@Drigax](https://forum.babylonjs.com/u/Drigax)\
**Post date:** [October 22, 2019, 7:26pm UTC](https://forum.babylonjs.com/t/2d-gui-and-actions/6513/2 "2019-10-22T19:26:21Z")

</div>

@khkannisto welcome to the forum!

Do you have a playground link that reproduces where the GUI blocks pick events on meshes?

---

<div class="post-metadata">

**Author:** ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)\
**Post date:** [October 23, 2019, 12:23am UTC](https://forum.babylonjs.com/t/2d-gui-and-actions/6513/3 "2019-10-23T00:23:21Z")

</div>

> [@khkannisto](#):
>
> But is it possible for the 2D GUI to intercept only when a button area is clicked and let other clicks (that are not over any button) to pass through to the mesh objects?

Welcome, K. Yes, easily possible. You can click on mesh itself… in ANY place where label/button doesn’t block. Often, GUI builders will use [_linkOffsetY_](https://doc.babylonjs.com/api/classes/babylon.gui.control#linkoffsety) property… to place button/label slightly ABOVE (or below) the actual mesh. When label/button is above mesh, it helps prevent the GUI control from blocking on-mesh clicks. _linkOffsetX_ is available, too.

There’s some powerful properties on GUI controls, too… like button._isHitTestVisible_ and _isPointerBlocker_ that can provide even MORE tools/customizing.

Here’s a test playground for we and Drigax to play-with. [https://www.babylonjs-playground.com/#4PLF3P#7](https://www.babylonjs-playground.com/#4PLF3P#7) (lots of click-info sent to console)

The green rectangle container (rect1)… is acting like a button here, because of the _onPointerDownObservable_ in lines 34-39. It SHOULD change the rect1 background color every click on the button, but you must mouse off-canvas, and back onto canvas… between clicks. Not sure why.

In line 33, you see rect1 _isPointerBlocker_ set to false. The sphere has an actionManager attached (lines 58-74)… so if you click on the sphere, the label will toggle visibility. Notice that you CAN click the sphere… THROUGH the rect1 background color. If you set line 33 to false, then you CANNOT click the sphere… through the button.

Lines 77-106 is ANOTHER kind of scene picking. It lets you pick sphere, or empty space, or ground (even though ground has no actionManager attached).

So, three types of picking… happening. GUI button picking, sphere actionManager picking, and scene-level pointer observer picking. Wow, huh? Lots of fun experiments and learning can happen in THAT playground. Lines 53-56 might also look familiar… I spoke of those earlier.

Feel free to edit it, press RUN arrow again, make more saves, ask more questions, tell us what you learn. You can’t hurt ANYTHING in our playground… just have fun, learn stuff, and ask stuff… we’re here to help.

---

<div class="post-metadata">

**Author:** ![khkannisto](https://avatars.discourse-cdn.com/v4/letter/k/b38774/32.png) [@khkannisto](https://forum.babylonjs.com/u/khkannisto)\
**Post date:** [October 23, 2019, 12:42pm UTC](https://forum.babylonjs.com/t/2d-gui-and-actions/6513/4 "2019-10-23T12:42:37Z")

</div>

Perfect, thanks! That example got me going in the right direction.
