From 5f9b03d217bfb5eee5e8b59e2275dca0451d989a Mon Sep 17 00:00:00 2001
From: Luke Yoo <w.lukeyoo@gmail.com>
Date: Mon, 9 Mar 2026 13:33:27 -0700
Subject: [PATCH 1/8] Squashed commit of the following:

commit 15110ba9c4e1502940241206abf6fa12b156a47a
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Mon Mar 9 13:31:24 2026 -0700

    Remove trailing space from examples/mobile/src/lib.rs

commit 26ebfb66e6165444b8b4a6dda3eeed74a6300331
Merge: 50e79d05b 7fc2e2da3
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Mon Mar 9 13:11:11 2026 -0700

    Merge remote-tracking branch 'origin/main' into pre-op-interaction

commit 50e79d05ba65738006e1b5df499ae4d531d98d54
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Mon Mar 9 03:08:05 2026 -0700

    Remove `Interaction` from examples/mobile/src/lib.rs

commit 914996bddcfb1353c6521812d18f35a893c81b98
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Mon Mar 9 02:50:51 2026 -0700

    Remove `Interaction` from examples/3d/mirror.rs

commit 1b93131ec4a48b664f56f4a7f7c66849d324c7ef
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Mon Mar 9 01:40:04 2026 -0700

    Remove helper from examples/animation/animation_graph.rs

commit d6df05bd645743128eb13a1bc491579ca460247c
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Mon Mar 9 00:18:39 2026 -0700

    Remove `LegacyInteraction`

commit fd91021d8a3351c54797f2b56de4b78f9fc1ab80
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Mon Mar 9 00:17:13 2026 -0700

    Remove helper from examples/ui/scroll_and_overflow/overflow.rs

commit 1edf379f0b1e9585beae9acb87b079a1f83a5925
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Mon Mar 9 00:08:26 2026 -0700

    Remove the helper from examples/ui/widgets/tab_navigation.rs

commit b44ac03d0e1041fd867caaadaba7e9c88e163e69
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 23:59:13 2026 -0700

    Remove `LegacyInteraction` from examples/ui/widgets/button.rs

commit 47c5facde79114ef084118b0a8fa4c27ca5c6f32
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 16:24:51 2026 -0700

    Remove `LegacyInteraction` from examples/state/computed_states.rs

commit 43042edd4cd3f18aa4ab33e7e461a82bdf519cb1
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 16:05:15 2026 -0700

    Remove `LegacyInteraction` from examples/games/game_menu.rs

commit e0414e0b84402029bb8252b2125a4fa97802e1a4
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 14:07:57 2026 -0700

    Remove `LegacyInteraction` from examples/ui/layout/size_constraints.rs

commit 59e51fc8675307ecd2c45725f7de0a65b4e9c12c
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 13:52:58 2026 -0700

    Remove `Interaction` from examples/testbed/ui.rs

commit ce57795ac7541a8bb834d6c3217f4de13876b9f1
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 13:46:32 2026 -0700

    Remove `Interaction` from examples/stress_tests/many_buttons.rs

commit 28a8fba6006fbd02e1fd4e9ccb224231b8073b85
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 13:20:16 2026 -0700

    Remove `Interaction` from examples/ui/styling/box_shadow.rs

commit 08d9a649760b5858b5e636c917d11f375e27c1f1
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 12:59:56 2026 -0700

    Change button system to observer style in examples/ui/images/ui_texture_slice.rs

commit 39734793c3f304691bca7639ba872fb53f89f3ee
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 12:59:11 2026 -0700

    Remove `Interaction` from examples/ui/images/ui_texture_atlas_slice.rs

commit 096abf3725f560d306f3de9705a0f8c2ca66eac4
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 01:45:41 2026 -0800

    Remove `Interaction` from examples/ui/images/ui_texture_slice.rs

commit 86dcba05a93b5de8c0fd0660159a62ebe67d6e2d
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 01:38:56 2026 -0800

    Remove `Interaction` from examples/ui/ui_transform.rs

commit 1d5edd8d232d46f655cd5ce04338bccbb67e2a7c
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 01:28:58 2026 -0800

    Remove `Interaction` from examples/state/custom_transitions.rs

commit 8a22aedaa57e33ea656ba3f27a5a017ea48f98f6
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 01:20:06 2026 -0800

    Remove `Interaction` from examples/ui/layout/display_and_visibility.rs

commit 9da7d85d2c2928dfc844539c6128c7eee9b7bccb
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 01:10:08 2026 -0800

    Remove `Interaction` from examples/state/sub_states.rs

commit fa404cd94e1743aa4062e3790e761f7fba02428b
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sun Mar 8 01:00:05 2026 -0800

    Remove `Interaction` from examples/state/states.rs

commit b7d2a3d039ae2bb581198bdc0436abe0d2b6c68a
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sat Mar 7 16:05:24 2026 -0800

    Remove `Interaction` from examples/ui/widgets/tab_navigation.rs

commit ffe074a893d524c0c5ea35573a91d409cffdf0e4
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sat Mar 7 15:59:35 2026 -0800

    Remove `Intereaction` from examples/ui/layout/size_constraints.rs

commit 7fd9e49bac14d42dd225391c54cf279d6ab9437b
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sat Mar 7 15:53:21 2026 -0800

    Remove `Interaction` from examples/state/computed_states.rs

commit 3f4646c55b9c4a079192d085182062ec4daa46f1
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sat Mar 7 15:47:04 2026 -0800

    Remove `Interaction` from examples/ui/widgets/button.rs

commit bd77a7fef7afb80adf6aa13fed8205a2e95b76c3
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sat Mar 7 11:55:50 2026 -0800

    Remove `Interaction` from examples/games/game_menu.rs

commit 063a9b0c750ee264f8f13023aa20d090407fda1a
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sat Mar 7 11:52:25 2026 -0800

    Format examples that have been worked on

commit 2a65db93ea96ed4d38925441469869e68e604740
Merge: 1e6ced2ec 162a70809
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Sat Mar 7 10:54:46 2026 -0800

    Merge remote-tracking branch 'origin/main' into pre-op-interaction

commit 1e6ced2ec5a77ef63aa03917545214b92732c94a
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Thu Mar 5 19:23:24 2026 -0800

    Remove `Interaction` from examples/animation/animation_masks.rs

commit 2b0d2d389a058713fde4dd1cc88f52a28ac7e63c
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Thu Mar 5 18:51:18 2026 -0800

    Remove `Interaction` from examples/3d/light_textures.rs

commit d37e5c6aa16d2dc3fe4431ecf42830418c2d6932
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Thu Mar 5 18:30:16 2026 -0800

    Remove `Interaction` from examples/ui/layout/ghost_nodes.rs

commit cc4c2c65ddbfecbef587869862766ed261883365
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Thu Mar 5 17:59:57 2026 -0800

    Remove `Interaction` from examples/usage/cooldown.rs

commit 0a3af15c3db24aa0af676574939fe638f2dac041
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Thu Mar 5 17:03:42 2026 -0800

    Remove `Interaction` from examples/3d/split_screen.rs

commit 459c87a833c4e17ec56faf53d5d57cfed620dc7d
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Thu Mar 5 16:45:33 2026 -0800

    Remove `Interaction` from examples/helpers/widgets.rs

commit 98e1e2c6cdf39857d1bf837605f9c22adb96667a
Merge: 0bacdb25d f36f54d93
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Thu Mar 5 14:23:01 2026 -0800

    Merge remote-tracking branch 'origin/main' into pre-op-interaction

commit 0bacdb25d0a90f126cdc6df079e9f5615f1c26b4
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Wed Mar 4 16:32:29 2026 -0800

    Remove `Interaction` from examples/3d/color_grading.rs

commit 2ea4c0becbabfccdbfa4c85b191c7ee3b0f5a847
Author: Luke Yoo <w.lukeyoo@gmail.com>
Date:   Wed Mar 4 15:52:38 2026 -0800

    Remove `Interaction` from examples/3d/clustered_decals.rs
---
 examples/2d/dynamic_mip_generation.rs        | 13 +--
 examples/3d/clustered_decal_maps.rs          | 12 ++-
 examples/3d/clustered_decals.rs              | 17 ++--
 examples/3d/color_grading.rs                 | 23 +++---
 examples/3d/contact_shadows.rs               |  9 ++-
 examples/3d/light_probe_blending.rs          | 29 ++-----
 examples/3d/light_textures.rs                | 20 +++--
 examples/3d/mirror.rs                        | 40 ++++++----
 examples/3d/mixed_lighting.rs                |  2 +-
 examples/3d/pccm.rs                          |  9 ++-
 examples/3d/pcss.rs                          |  5 +-
 examples/3d/split_screen.rs                  | 40 +++++-----
 examples/3d/ssr.rs                           |  4 +-
 examples/animation/animation_graph.rs        | 28 ++++---
 examples/animation/animation_masks.rs        | 50 ++++++------
 examples/games/game_menu.rs                  | 83 ++++++++++----------
 examples/helpers/widgets.rs                  | 17 ++--
 examples/mobile/src/lib.rs                   | 41 +++++-----
 examples/state/computed_states.rs            | 46 +++++++----
 examples/state/custom_transitions.rs         | 37 +++++----
 examples/state/states.rs                     | 36 +++++----
 examples/state/sub_states.rs                 | 36 +++++----
 examples/stress_tests/many_buttons.rs        | 19 +++--
 examples/testbed/ui.rs                       |  1 -
 examples/ui/images/ui_texture_atlas_slice.rs | 33 +++++---
 examples/ui/images/ui_texture_slice.rs       | 33 +++++---
 examples/ui/layout/display_and_visibility.rs | 83 ++++++++++----------
 examples/ui/layout/ghost_nodes.rs            | 19 ++---
 examples/ui/layout/size_constraints.rs       | 34 +++++---
 examples/ui/scroll_and_overflow/overflow.rs  | 41 +++++++---
 examples/ui/styling/box_shadow.rs            | 71 ++++++++++-------
 examples/ui/ui_transform.rs                  | 39 +++++----
 examples/ui/widgets/button.rs                | 51 ++++++------
 examples/ui/widgets/tab_navigation.rs        | 36 ++++++---
 examples/usage/cooldown.rs                   | 45 +++++------
 35 files changed, 599 insertions(+), 503 deletions(-)

diff --git a/examples/2d/dynamic_mip_generation.rs b/examples/2d/dynamic_mip_generation.rs
index 8e776ee749f34..69c6bd0581384 100644
--- a/examples/2d/dynamic_mip_generation.rs
+++ b/examples/2d/dynamic_mip_generation.rs
@@ -225,11 +225,7 @@ fn main() {
     .add_systems(Update, animate_image_scale)
     .add_systems(
         Update,
-        (
-            widgets::handle_ui_interactions::<AppSetting>,
-            update_radio_buttons,
-        )
-            .chain(),
+        update_radio_buttons.run_if(resource_changed::<AppStatus>),
     )
     .add_systems(
         Update,
@@ -237,10 +233,9 @@ fn main() {
     )
     .add_systems(
         Update,
-        handle_app_setting_change
-            .after(widgets::handle_ui_interactions::<AppSetting>)
-            .before(regenerate_image_when_requested),
-    );
+        handle_app_setting_change.before(regenerate_image_when_requested),
+    )
+    .add_observer(widgets::handle_ui_button_interaction_on_click::<AppSetting>);
 
     // Because `MipGenerationJobs` is part of the render app, we need to add the
     // associated systems to that app, not the main one.
diff --git a/examples/3d/clustered_decal_maps.rs b/examples/3d/clustered_decal_maps.rs
index 0354b359b1f07..1e2b01d55802b 100644
--- a/examples/3d/clustered_decal_maps.rs
+++ b/examples/3d/clustered_decal_maps.rs
@@ -152,14 +152,12 @@ fn main() {
         .add_systems(
             Update,
             (
-                widgets::handle_ui_interactions::<AppSetting>,
-                update_radio_buttons,
-            ),
-        )
-        .add_systems(
-            Update,
-            handle_emission_type_change.after(widgets::handle_ui_interactions::<AppSetting>),
+                handle_emission_type_change,
+                update_radio_buttons.run_if(resource_changed::<AppStatus>),
+            )
+                .chain(),
         )
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<AppSetting>)
         .insert_resource(SeededRng(ChaCha8Rng::seed_from_u64(19878367467712)))
         .run();
 }
diff --git a/examples/3d/clustered_decals.rs b/examples/3d/clustered_decals.rs
index d0b8b5bc11174..da17284a9dcaf 100644
--- a/examples/3d/clustered_decals.rs
+++ b/examples/3d/clustered_decals.rs
@@ -8,6 +8,7 @@ use bevy::{
     input::mouse::AccumulatedMouseMotion,
     light::ClusteredDecal,
     pbr::{decal, ExtendedMaterial, MaterialExtension},
+    picking::hover::Hovered,
     prelude::*,
     render::{
         render_resource::AsBindGroup,
@@ -135,11 +136,13 @@ fn main() {
         .add_systems(Startup, setup)
         .add_systems(Update, draw_gizmos)
         .add_systems(Update, rotate_cube)
-        .add_systems(Update, widgets::handle_ui_interactions::<Selection>)
         .add_systems(
             Update,
-            (handle_selection_change, update_radio_buttons)
-                .after(widgets::handle_ui_interactions::<Selection>),
+            (
+                handle_selection_change,
+                update_radio_buttons.run_if(resource_changed::<AppStatus>),
+            )
+                .chain(),
         )
         .add_systems(Update, process_move_input)
         .add_systems(Update, process_scale_input)
@@ -147,6 +150,7 @@ fn main() {
         .add_systems(Update, switch_drag_mode)
         .add_systems(Update, update_help_text)
         .add_systems(Update, update_button_visibility)
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<Selection>)
         .run();
 }
 
@@ -288,6 +292,7 @@ fn drag_button(label: &str) -> impl Bundle {
         },
         Button,
         BackgroundColor(Color::BLACK),
+        Hovered::default(),
         BUTTON_BORDER_COLOR,
         children![widgets::ui_text(label, Color::WHITE)],
     )
@@ -490,7 +495,7 @@ fn create_help_string(app_status: &AppStatus) -> String {
 /// mode back to its default value of [`DragMode::Move`].
 fn switch_drag_mode(
     mut commands: Commands,
-    mut interactions: Query<(&Interaction, &DragMode)>,
+    mut button_interactions: Query<(&Hovered, &DragMode), With<Button>>,
     mut windows: Query<Entity, With<Window>>,
     mouse_buttons: Res<ButtonInput<MouseButton>>,
     mut app_status: ResMut<AppStatus>,
@@ -499,8 +504,8 @@ fn switch_drag_mode(
         return;
     }
 
-    for (interaction, drag_mode) in &mut interactions {
-        if *interaction != Interaction::Hovered {
+    for (hovered, drag_mode) in &mut button_interactions {
+        if !hovered.0 {
             continue;
         }
 
diff --git a/examples/3d/color_grading.rs b/examples/3d/color_grading.rs
index 9677646cc9fb6..7f4378e81fe5f 100644
--- a/examples/3d/color_grading.rs
+++ b/examples/3d/color_grading.rs
@@ -104,13 +104,9 @@ fn main() {
         .add_systems(Startup, setup)
         .add_systems(
             Update,
-            (
-                handle_button_presses,
-                adjust_color_grading_option,
-                update_ui_state,
-            )
-                .chain(),
+            (adjust_color_grading_option, update_ui_state).chain(),
         )
+        .add_observer(handle_button_presses)
         .run();
 }
 
@@ -508,16 +504,15 @@ impl SelectedColorGradingOption {
 
 /// Handles mouse clicks on the buttons when the user clicks on a new one.
 fn handle_button_presses(
-    mut interactions: Query<(&Interaction, &ColorGradingOptionWidget), Changed<Interaction>>,
+    press: On<Pointer<Click>>,
+    mut color_grading_option_widget_query: Query<&ColorGradingOptionWidget>,
     mut currently_selected_option: ResMut<SelectedColorGradingOption>,
 ) {
-    for (interaction, widget) in interactions.iter_mut() {
-        if widget.widget_type == ColorGradingOptionWidgetType::Button
-            && *interaction == Interaction::Pressed
-        {
-            *currently_selected_option = widget.option;
-        }
-    }
+    let Ok(widget) = color_grading_option_widget_query.get_mut(press.event_target()) else {
+        return;
+    };
+
+    *currently_selected_option = widget.option;
 }
 
 /// Updates the state of the UI based on the current state.
diff --git a/examples/3d/contact_shadows.rs b/examples/3d/contact_shadows.rs
index 1df5db89dc14d..9708e4d08b57e 100644
--- a/examples/3d/contact_shadows.rs
+++ b/examples/3d/contact_shadows.rs
@@ -98,11 +98,12 @@ fn main() {
         .add_systems(
             Update,
             (
-                widgets::handle_ui_interactions::<ExampleSetting>,
-                update_radio_buttons.after(widgets::handle_ui_interactions::<ExampleSetting>),
-                handle_setting_change.after(widgets::handle_ui_interactions::<ExampleSetting>),
-            ),
+                handle_setting_change,
+                update_radio_buttons.run_if(resource_changed::<AppStatus>),
+            )
+                .chain(),
         )
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<ExampleSetting>)
         .run();
 }
 
diff --git a/examples/3d/light_probe_blending.rs b/examples/3d/light_probe_blending.rs
index b2656c1c32c1e..9205a7f089d4e 100644
--- a/examples/3d/light_probe_blending.rs
+++ b/examples/3d/light_probe_blending.rs
@@ -166,36 +166,19 @@ fn main() {
         .add_systems(
             Update,
             (
-                widgets::handle_ui_interactions::<GizmosEnabled>,
                 handle_gizmos_enabled_change,
-            )
-                .chain(),
-        )
-        .add_systems(
-            Update,
-            (
-                widgets::handle_ui_interactions::<ObjectToShow>,
                 handle_object_to_show_change,
-            )
-                .chain(),
-        )
-        .add_systems(
-            Update,
-            (
-                widgets::handle_ui_interactions::<CameraMode>,
-                handle_camera_mode_change,
-            )
-                .chain()
-                .after(free_camera::run_freecamera_controller),
+                handle_camera_mode_change.after(free_camera::run_freecamera_controller),
+            ),
         )
         .add_systems(
             Update,
-            update_radio_buttons
-                .after(widgets::handle_ui_interactions::<GizmosEnabled>)
-                .after(widgets::handle_ui_interactions::<ObjectToShow>)
-                .after(widgets::handle_ui_interactions::<CameraMode>),
+            update_radio_buttons.run_if(resource_changed::<AppStatus>),
         )
         .add_systems(Update, draw_gizmos)
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<GizmosEnabled>)
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<ObjectToShow>)
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<CameraMode>)
         .run();
 }
 
diff --git a/examples/3d/light_textures.rs b/examples/3d/light_textures.rs
index d307e9cfc361c..510959672d598 100644
--- a/examples/3d/light_textures.rs
+++ b/examples/3d/light_textures.rs
@@ -9,6 +9,7 @@ use bevy::{
     input::mouse::AccumulatedMouseMotion,
     light::{DirectionalLightTexture, NotShadowCaster, PointLightTexture, SpotLightTexture},
     pbr::decal,
+    picking::hover::Hovered,
     prelude::*,
     render::renderer::{RenderAdapter, RenderDevice},
     window::{CursorIcon, SystemCursorIcon},
@@ -120,13 +121,13 @@ fn main() {
         .add_systems(Update, draw_gizmos)
         .add_systems(Update, rotate_cube)
         .add_systems(Update, hide_shadows)
-        .add_systems(Update, widgets::handle_ui_interactions::<Selection>)
-        .add_systems(Update, widgets::handle_ui_interactions::<Visibility>)
         .add_systems(
             Update,
-            (handle_selection_change, update_radio_buttons)
-                .after(widgets::handle_ui_interactions::<Selection>)
-                .after(widgets::handle_ui_interactions::<Visibility>),
+            (
+                handle_selection_change,
+                update_radio_buttons.run_if(resource_changed::<AppStatus>),
+            )
+                .chain(),
         )
         .add_systems(Update, toggle_visibility)
         .add_systems(Update, update_directional_light)
@@ -136,6 +137,8 @@ fn main() {
         .add_systems(Update, switch_drag_mode)
         .add_systems(Update, update_help_text)
         .add_systems(Update, update_button_visibility)
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<Selection>)
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<Visibility>)
         .run();
 }
 
@@ -334,6 +337,7 @@ fn drag_button(label: &str) -> impl Bundle {
         },
         Button,
         BackgroundColor(Color::BLACK),
+        Hovered::default(),
         BUTTON_BORDER_COLOR,
         children![widgets::ui_text(label, Color::WHITE),],
     )
@@ -583,7 +587,7 @@ fn create_help_string(app_status: &AppStatus) -> String {
 /// mode back to its default value of [`DragMode::Move`].
 fn switch_drag_mode(
     mut commands: Commands,
-    mut interactions: Query<(&Interaction, &DragMode)>,
+    mut button_interactions: Query<(&Hovered, &DragMode), With<Button>>,
     mut windows: Query<Entity, With<Window>>,
     mouse_buttons: Res<ButtonInput<MouseButton>>,
     mut app_status: ResMut<AppStatus>,
@@ -592,8 +596,8 @@ fn switch_drag_mode(
         return;
     }
 
-    for (interaction, drag_mode) in &mut interactions {
-        if *interaction != Interaction::Hovered {
+    for (hovered, drag_mode) in &mut button_interactions {
+        if !hovered.0 {
             continue;
         }
 
diff --git a/examples/3d/mirror.rs b/examples/3d/mirror.rs
index 6b5b9d71cc9ba..6451ccc2eb227 100644
--- a/examples/3d/mirror.rs
+++ b/examples/3d/mirror.rs
@@ -3,11 +3,12 @@
 use std::f32::consts::FRAC_PI_2;
 
 use crate::widgets::{RadioButton, WidgetClickEvent, WidgetClickSender};
-use bevy::camera::RenderTarget;
 use bevy::{
     asset::RenderAssetUsages,
+    camera::RenderTarget,
     color::palettes::css::GREEN,
     input::mouse::AccumulatedMouseMotion,
+    input_focus::InputDispatchPlugin,
     math::{reflection_matrix, uvec2, vec3},
     pbr::{ExtendedMaterial, MaterialExtension},
     prelude::*,
@@ -15,6 +16,8 @@ use bevy::{
         AsBindGroup, Extent3d, TextureDimension, TextureFormat, TextureUsages,
     },
     shader::ShaderRef,
+    ui::Pressed,
+    ui_widgets::UiWidgetsPlugins,
     window::{PrimaryWindow, WindowResized},
 };
 
@@ -110,13 +113,17 @@ static FOX_ASSET_PATH: &str = "models/animated/Fox.glb";
 /// The app entry point.
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins.set(WindowPlugin {
-            primary_window: Some(Window {
-                title: "Bevy Mirror Example".into(),
+        .add_plugins((
+            DefaultPlugins.set(WindowPlugin {
+                primary_window: Some(Window {
+                    title: "Bevy Mirror Example".into(),
+                    ..default()
+                }),
                 ..default()
             }),
-            ..default()
-        }))
+            UiWidgetsPlugins,
+            InputDispatchPlugin,
+        ))
         .add_plugins(MaterialPlugin::<
             ExtendedMaterial<StandardMaterial, ScreenSpaceTextureExtension>,
         >::default())
@@ -125,11 +132,13 @@ fn main() {
         .add_systems(Startup, setup)
         .add_systems(Update, handle_window_resize_messages)
         .add_systems(Update, (move_camera_on_mouse_down, move_fox_on_mouse_down))
-        .add_systems(Update, widgets::handle_ui_interactions::<DragAction>)
         .add_systems(
             Update,
-            (handle_mouse_action_change, update_radio_buttons)
-                .after(widgets::handle_ui_interactions::<DragAction>),
+            (
+                handle_mouse_action_change,
+                update_radio_buttons.run_if(resource_changed::<AppStatus>),
+            )
+                .chain(),
         )
         .add_systems(
             Update,
@@ -137,6 +146,7 @@ fn main() {
         )
         .add_systems(Update, play_fox_animation)
         .add_systems(Update, update_help_text)
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<DragAction>)
         .run();
 }
 
@@ -444,7 +454,7 @@ fn move_fox_on_mouse_down(
     mut scene_roots_query: Query<&mut Transform, With<SceneRoot>>,
     windows_query: Query<&Window, With<PrimaryWindow>>,
     cameras_query: Query<(&Camera, &GlobalTransform)>,
-    interactions_query: Query<&Interaction, With<RadioButton>>,
+    pressed_query: Query<&Pressed, With<RadioButton>>,
     buttons: Res<ButtonInput<MouseButton>>,
     app_status: Res<AppStatus>,
 ) {
@@ -453,9 +463,7 @@ fn move_fox_on_mouse_down(
     // widget.
     if app_status.drag_action != DragAction::MoveFox
         || !buttons.pressed(MouseButton::Left)
-        || interactions_query
-            .iter()
-            .any(|interaction| *interaction != Interaction::None)
+        || pressed_query.iter().next().is_some()
     {
         return;
     }
@@ -528,7 +536,7 @@ fn update_radio_buttons(
 /// This is mostly copied from `examples/camera/camera_orbit.rs`.
 fn move_camera_on_mouse_down(
     mut main_cameras_query: Query<&mut Transform, (With<Camera>, Without<MirrorCamera>)>,
-    interactions_query: Query<&Interaction, With<RadioButton>>,
+    pressed_query: Query<&Pressed, With<RadioButton>>,
     mouse_buttons: Res<ButtonInput<MouseButton>>,
     mouse_motion: Res<AccumulatedMouseMotion>,
     app_status: Res<AppStatus>,
@@ -538,9 +546,7 @@ fn move_camera_on_mouse_down(
     // widget.
     if app_status.drag_action != DragAction::MoveCamera
         || !mouse_buttons.pressed(MouseButton::Left)
-        || interactions_query
-            .iter()
-            .any(|interaction| *interaction != Interaction::None)
+        || pressed_query.iter().next().is_some()
     {
         return;
     }
diff --git a/examples/3d/mixed_lighting.rs b/examples/3d/mixed_lighting.rs
index 4cf033459469d..589bc407ab09b 100644
--- a/examples/3d/mixed_lighting.rs
+++ b/examples/3d/mixed_lighting.rs
@@ -138,10 +138,10 @@ fn main() {
         .add_systems(Update, make_sphere_nonpickable)
         .add_systems(Update, update_radio_buttons)
         .add_systems(Update, handle_lighting_mode_change)
-        .add_systems(Update, widgets::handle_ui_interactions::<LightingMode>)
         .add_systems(Update, reset_sphere_position)
         .add_systems(Update, move_sphere)
         .add_systems(Update, adjust_help_text)
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<LightingMode>)
         .run();
 }
 
diff --git a/examples/3d/pccm.rs b/examples/3d/pccm.rs
index 08f04c077268e..18205b7d2764b 100644
--- a/examples/3d/pccm.rs
+++ b/examples/3d/pccm.rs
@@ -65,12 +65,15 @@ fn main() {
         .init_resource::<AppStatus>()
         .add_message::<WidgetClickEvent<PccmEnableStatus>>()
         .add_systems(Startup, setup)
-        .add_systems(Update, widgets::handle_ui_interactions::<PccmEnableStatus>)
         .add_systems(
             Update,
-            (handle_pccm_enable_change, update_radio_buttons)
-                .after(widgets::handle_ui_interactions::<PccmEnableStatus>),
+            (
+                handle_pccm_enable_change,
+                update_radio_buttons.run_if(resource_changed::<AppStatus>),
+            )
+                .chain(),
         )
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<PccmEnableStatus>)
         .run();
 }
 
diff --git a/examples/3d/pcss.rs b/examples/3d/pcss.rs
index fc6e447d2ea7a..22a99ac4917e2 100644
--- a/examples/3d/pcss.rs
+++ b/examples/3d/pcss.rs
@@ -129,10 +129,9 @@ fn main() {
         ))
         .add_message::<WidgetClickEvent<AppSetting>>()
         .add_systems(Startup, setup)
-        .add_systems(Update, widgets::handle_ui_interactions::<AppSetting>)
         .add_systems(
             Update,
-            update_radio_buttons.after(widgets::handle_ui_interactions::<AppSetting>),
+            update_radio_buttons.run_if(resource_changed::<AppStatus>),
         )
         .add_systems(
             Update,
@@ -141,8 +140,8 @@ fn main() {
                 handle_shadow_filter_change,
                 handle_pcss_toggle,
             )
-                .after(widgets::handle_ui_interactions::<AppSetting>),
         )
+        .add_observer(widgets::handle_ui_button_interaction_on_click::<AppSetting>)
         .run();
 }
 
diff --git a/examples/3d/split_screen.rs b/examples/3d/split_screen.rs
index ea30922d3e541..54bc207259161 100644
--- a/examples/3d/split_screen.rs
+++ b/examples/3d/split_screen.rs
@@ -10,7 +10,8 @@ fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
-        .add_systems(Update, (set_camera_viewports, button_system))
+        .add_systems(Update, set_camera_viewports)
+        .add_observer(handle_buttons)
         .run();
 }
 
@@ -178,27 +179,24 @@ fn set_camera_viewports(
     }
 }
 
-fn button_system(
-    interaction_query: Query<
-        (&Interaction, &ComputedUiTargetCamera, &RotateCamera),
-        (Changed<Interaction>, With<Button>),
-    >,
+fn handle_buttons(
+    click: On<Pointer<Click>>,
+    button_query: Query<(&ComputedUiTargetCamera, &RotateCamera), With<Button>>,
     mut camera_query: Query<&mut Transform, With<Camera>>,
 ) {
-    for (interaction, computed_target, RotateCamera(direction)) in &interaction_query {
-        if let Interaction::Pressed = *interaction {
-            // Since TargetCamera propagates to the children, we can use it to find
-            // which side of the screen the button is on.
-            if let Some(mut camera_transform) = computed_target
-                .get()
-                .and_then(|camera| camera_query.get_mut(camera).ok())
-            {
-                let angle = match direction {
-                    Direction::Left => -0.1,
-                    Direction::Right => 0.1,
-                };
-                camera_transform.rotate_around(Vec3::ZERO, Quat::from_axis_angle(Vec3::Y, angle));
-            }
-        }
+    let Ok((computed_target, RotateCamera(direction))) = button_query.get(click.event_target()) else {
+        return;
+    };
+    // Since TargetCamera propagates to the children, we can use it to find
+    // which side of the screen the button is on.
+    if let Some(mut camera_transform) = computed_target
+        .get()
+        .and_then(|camera| camera_query.get_mut(camera).ok())
+    {
+        let angle = match direction {
+            Direction::Left => -0.1,
+            Direction::Right => 0.1,
+        };
+        camera_transform.rotate_around(Vec3::ZERO, Quat::from_axis_angle(Vec3::Y, angle));
     }
 }
diff --git a/examples/3d/ssr.rs b/examples/3d/ssr.rs
index 276e0b97cdc5d..ba49745008529 100644
--- a/examples/3d/ssr.rs
+++ b/examples/3d/ssr.rs
@@ -27,7 +27,7 @@ use bevy::{
 mod widgets;
 
 use widgets::{
-    handle_ui_interactions, main_ui_node, option_buttons, update_ui_radio_button,
+    handle_ui_button_interaction_on_click, main_ui_node, option_buttons, update_ui_radio_button,
     update_ui_radio_button_text, RadioButton, RadioButtonText, WidgetClickEvent, WidgetClickSender,
     BUTTON_BORDER, BUTTON_BORDER_COLOR, BUTTON_BORDER_RADIUS_SIZE, BUTTON_PADDING,
 };
@@ -221,7 +221,7 @@ fn main() {
         .add_systems(Update, rotate_model)
         .add_systems(Update, move_camera)
         .add_systems(Update, adjust_app_settings)
-        .add_systems(Update, handle_ui_interactions::<ExampleSetting>)
+        .add_observer(handle_ui_button_interaction_on_click::<ExampleSetting>)
         .run();
 }
 
diff --git a/examples/animation/animation_graph.rs b/examples/animation/animation_graph.rs
index e5e64d40ea9f2..1ca032835decf 100644
--- a/examples/animation/animation_graph.rs
+++ b/examples/animation/animation_graph.rs
@@ -8,8 +8,10 @@ use bevy::{
         basic::WHITE,
         css::{ANTIQUE_WHITE, DARK_GREEN},
     },
+    input_focus::InputDispatchPlugin,
     prelude::*,
-    ui::RelativeCursorPosition,
+    ui::{Pressed, RelativeCursorPosition},
+    ui_widgets::{Button, UiWidgetsPlugins},
 };
 
 use argh::FromArgs;
@@ -74,13 +76,17 @@ fn main() {
     let args = Args::from_args(&[], &[]).unwrap();
 
     App::new()
-        .add_plugins(DefaultPlugins.set(WindowPlugin {
-            primary_window: Some(Window {
-                title: "Bevy Animation Graph Example".into(),
+        .add_plugins((
+            DefaultPlugins.set(WindowPlugin {
+                primary_window: Some(Window {
+                    title: "Bevy Animation Graph Example".into(),
+                    ..default()
+                }),
                 ..default()
             }),
-            ..default()
-        }))
+            UiWidgetsPlugins,
+            InputDispatchPlugin,
+        ))
         .add_systems(Startup, (setup_assets, setup_scene, setup_ui))
         .add_systems(Update, init_animations)
         .add_systems(
@@ -307,7 +313,7 @@ fn setup_node_rects(commands: &mut Commands) {
 
             if let NodeType::Clip(clip) = node_type {
                 container.insert((
-                    Interaction::None,
+                    Button,
                     RelativeCursorPosition::default(),
                     (*clip).clone(),
                 ));
@@ -402,14 +408,10 @@ fn init_animations(
 /// Read cursor position relative to clip nodes, allowing the user to change weights
 /// when dragging the node UI widgets.
 fn handle_weight_drag(
-    mut interaction_query: Query<(&Interaction, &RelativeCursorPosition, &ClipNode)>,
+    mut pressed_query: Query<(&RelativeCursorPosition, &ClipNode), With<Pressed>>,
     mut animation_weights_query: Query<&mut ExampleAnimationWeights>,
 ) {
-    for (interaction, relative_cursor, clip_node) in &mut interaction_query {
-        if !matches!(*interaction, Interaction::Pressed) {
-            continue;
-        }
-
+    for (relative_cursor, clip_node) in &mut pressed_query {
         let Some(pos) = relative_cursor.normalized else {
             continue;
         };
diff --git a/examples/animation/animation_masks.rs b/examples/animation/animation_masks.rs
index f5c5dbd808b09..7b75f7089e878 100644
--- a/examples/animation/animation_masks.rs
+++ b/examples/animation/animation_masks.rs
@@ -103,7 +103,6 @@ fn main() {
         }))
         .add_systems(Startup, (setup_scene, setup_ui))
         .add_systems(Update, setup_animation_graph_once_loaded)
-        .add_systems(Update, handle_button_toggles)
         .add_systems(Update, update_ui)
         .insert_resource(GlobalAmbientLight {
             color: WHITE.into(),
@@ -111,6 +110,7 @@ fn main() {
             ..default()
         })
         .init_resource::<AppState>()
+        .add_observer(handle_button_toggles_on_press)
         .run();
 }
 
@@ -409,44 +409,40 @@ fn setup_animation_graph_once_loaded(
 
 // A system that handles requests from the user to toggle mask groups on and
 // off.
-fn handle_button_toggles(
-    mut interactions: Query<(&Interaction, &mut AnimationControl), Changed<Interaction>>,
+fn handle_button_toggles_on_press(
+    press: On<Pointer<Click>>,
+    mut animation_control_query: Query<(&mut AnimationControl)>,
     mut animation_players: Query<&AnimationGraphHandle, With<AnimationPlayer>>,
     mut animation_graphs: ResMut<Assets<AnimationGraph>>,
-    mut animation_nodes: Option<ResMut<AnimationNodes>>,
+    animation_nodes: Option<ResMut<AnimationNodes>>,
     mut app_state: ResMut<AppState>,
 ) {
-    let Some(ref mut animation_nodes) = animation_nodes else {
+    // We only care about press events.
+    let (Some(ref mut animation_nodes), Ok(animation_control)) = (
+        animation_nodes, animation_control_query.get_mut(press.event_target())) else {
         return;
     };
 
-    for (interaction, animation_control) in interactions.iter_mut() {
-        // We only care about press events.
-        if *interaction != Interaction::Pressed {
-            continue;
-        }
+    // Toggle the state of the clip.
+    app_state.0[animation_control.group_id as usize].clip = animation_control.label as u8;
 
-        // Toggle the state of the clip.
-        app_state.0[animation_control.group_id as usize].clip = animation_control.label as u8;
+    // Now grab the animation player. (There's only one in our case, but we
+    // iterate just for clarity's sake.)
+    for animation_graph_handle in animation_players.iter_mut() {
+        // The animation graph needs to have loaded.
+        let Some(mut animation_graph) = animation_graphs.get_mut(animation_graph_handle) else {
+            continue;
+        };
 
-        // Now grab the animation player. (There's only one in our case, but we
-        // iterate just for clarity's sake.)
-        for animation_graph_handle in animation_players.iter_mut() {
-            // The animation graph needs to have loaded.
-            let Some(mut animation_graph) = animation_graphs.get_mut(animation_graph_handle) else {
+        for (clip_index, &animation_node_index) in animation_nodes.0.iter().enumerate() {
+            let Some(animation_node) = animation_graph.get_mut(animation_node_index) else {
                 continue;
             };
 
-            for (clip_index, &animation_node_index) in animation_nodes.0.iter().enumerate() {
-                let Some(animation_node) = animation_graph.get_mut(animation_node_index) else {
-                    continue;
-                };
-
-                if animation_control.label as usize == clip_index {
-                    animation_node.mask &= !(1 << animation_control.group_id);
-                } else {
-                    animation_node.mask |= 1 << animation_control.group_id;
-                }
+            if animation_control.label as usize == clip_index {
+                animation_node.mask &= !(1 << animation_control.group_id);
+            } else {
+                animation_node.mask |= 1 << animation_control.group_id;
             }
         }
     }
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index d3f16ef8b4845..a906ccafbf0fd 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -2,7 +2,7 @@
 //! change some settings or quit. There is no actual game, it will just display the current
 //! settings for 5 seconds before going back to the menu.
 
-use bevy::prelude::*;
+use bevy::{input_focus::InputDispatchPlugin, prelude::*, ui_widgets::UiWidgetsPlugins};
 
 const TEXT_COLOR: Color = Color::srgb(0.9, 0.9, 0.9);
 
@@ -32,7 +32,7 @@ struct Volume(u32);
 
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         // Insert as resource the initial value for the settings resources
         .insert_resource(DisplayQuality::Medium)
         .insert_resource(Volume(7))
@@ -229,11 +229,16 @@ mod menu {
         app::AppExit,
         color::palettes::css::CRIMSON,
         ecs::spawn::{SpawnIter, SpawnWith},
+        picking::hover::Hovered,
         prelude::*,
+        reflect::Is,
+        ui::Pressed,
+        ui_widgets::Button,
     };
 
     use super::{DisplayQuality, GameState, Setting, Volume, TEXT_COLOR};
 
+
     // This plugin manages the menu, with 5 different screens:
     // - a main menu with "New Game", "Settings", "Quit"
     // - a settings menu with two submenus and a back button
@@ -265,10 +270,11 @@ mod menu {
                 setting_button::<Volume>.run_if(in_state(MenuState::SettingsSound)),
             )
             // Common systems to all screens that handles buttons behavior
-            .add_systems(
-                Update,
-                (menu_action, button_system).run_if(in_state(GameState::Menu)),
-            );
+            .add_systems(Update, menu_action.run_if(in_state(GameState::Menu)))
+            .add_observer(button_on_interaction::<Add, SelectedOption>)
+            .add_observer(button_on_interaction::<Add, Pressed>)
+            .add_observer(button_on_interaction::<Insert, Hovered>)
+            .add_observer(button_on_interaction::<Insert, Hovered>);
     }
 
     // State used for the current menu screen
@@ -300,8 +306,12 @@ mod menu {
 
     const NORMAL_BUTTON: Color = Color::srgb(0.15, 0.15, 0.15);
     const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
-    const HOVERED_PRESSED_BUTTON: Color = Color::srgb(0.25, 0.65, 0.25);
-    const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
+    const PRESSED_BUTTON: Color = Color::srgb(0.25, 0.65, 0.25);
+    const SELECTED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
+
+    #[derive(Component)]
+    #[require(Button, Hovered)]
+    struct HoverableButton;
 
     // Tag component used to mark which setting is currently selected
     #[derive(Component)]
@@ -319,19 +329,18 @@ mod menu {
         Quit,
     }
 
-    // This system handles changing all buttons color based on mouse interaction
-    fn button_system(
-        mut interaction_query: Query<
-            (&Interaction, &mut BackgroundColor, Option<&SelectedOption>),
-            (Changed<Interaction>, With<Button>),
-        >,
+    // This observer handles changing all buttons color based on mouse interaction
+    fn button_on_interaction<E: EntityEvent, C: Component>(
+        event: On<E, C>,
+        mut button_query: Query<(&Hovered, Has<Pressed>, &mut BackgroundColor, Option<&SelectedOption>), With<Button>>,
     ) {
-        for (interaction, mut background_color, selected) in &mut interaction_query {
-            *background_color = match (*interaction, selected) {
-                (Interaction::Pressed, _) | (Interaction::None, Some(_)) => PRESSED_BUTTON.into(),
-                (Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON.into(),
-                (Interaction::Hovered, None) => HOVERED_BUTTON.into(),
-                (Interaction::None, None) => NORMAL_BUTTON.into(),
+        if let Ok((hovered, pressed, mut background_color, selected)) = button_query.get_mut(event.event_target()) {
+            let pressed = pressed && !(E::is::<Remove>() && C::is::<Pressed>());
+            *background_color = match (hovered.get(), pressed, selected) {
+                (_, _, Some(_)) => SELECTED_BUTTON.into(),
+                (true, _, _) => PRESSED_BUTTON.into(),
+                (false, true, _) => HOVERED_BUTTON.into(),
+                _ => NORMAL_BUTTON.into(),
             }
         }
     }
@@ -339,17 +348,14 @@ mod menu {
     // This system updates the settings when a new value for a setting is selected, and marks
     // the button as the one currently selected
     fn setting_button<T: Resource + Component + PartialEq + Copy>(
-        interaction_query: Query<
-            (&Interaction, &Setting<T>, Entity),
-            (Changed<Interaction>, With<Button>),
-        >,
+        button_query: Query<(Has<Pressed>, &Setting<T>, Entity), With<Button>>,
         selected_query: Single<(Entity, &mut BackgroundColor), With<SelectedOption>>,
         mut commands: Commands,
         mut setting: ResMut<T>,
     ) {
         let (previous_button, mut previous_button_color) = selected_query.into_inner();
-        for (interaction, button_setting, entity) in &interaction_query {
-            if *interaction == Interaction::Pressed && *setting != button_setting.0 {
+        for (pressed, button_setting, entity) in &button_query {
+            if pressed && *setting != button_setting.0 {
                 *previous_button_color = NORMAL_BUTTON.into();
                 commands.entity(previous_button).remove::<SelectedOption>();
                 commands.entity(entity).insert(SelectedOption);
@@ -425,7 +431,7 @@ mod menu {
                     // - settings
                     // - quit
                     (
-                        Button,
+                        HoverableButton,
                         button_node.clone(),
                         BackgroundColor(NORMAL_BUTTON),
                         MenuButtonAction::Play,
@@ -439,7 +445,7 @@ mod menu {
                         ]
                     ),
                     (
-                        Button,
+                        HoverableButton,
                         button_node.clone(),
                         BackgroundColor(NORMAL_BUTTON),
                         MenuButtonAction::Settings,
@@ -453,7 +459,7 @@ mod menu {
                         ]
                     ),
                     (
-                        Button,
+                        HoverableButton,
                         button_node,
                         BackgroundColor(NORMAL_BUTTON),
                         MenuButtonAction::Quit,
@@ -511,7 +517,7 @@ mod menu {
                     .into_iter()
                     .map(move |(action, text)| {
                         (
-                            Button,
+                            HoverableButton,
                             button_node.clone(),
                             BackgroundColor(NORMAL_BUTTON),
                             action,
@@ -581,7 +587,7 @@ mod menu {
                                     DisplayQuality::High,
                                 ] {
                                     let mut entity = parent.spawn((
-                                        Button,
+                                        HoverableButton,
                                         Node {
                                             width: px(150),
                                             height: px(65),
@@ -603,7 +609,7 @@ mod menu {
                     ),
                     // Display the back button to return to the settings screen
                     (
-                        Button,
+                        HoverableButton,
                         button_node(),
                         BackgroundColor(NORMAL_BUTTON),
                         MenuButtonAction::BackToSettings,
@@ -662,7 +668,7 @@ mod menu {
                             SpawnWith(move |parent: &mut ChildSpawner| {
                                 for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
                                     let mut entity = parent.spawn((
-                                        Button,
+                                        HoverableButton,
                                         Node {
                                             width: px(30),
                                             height: px(65),
@@ -679,7 +685,7 @@ mod menu {
                         ))
                     ),
                     (
-                        Button,
+                        HoverableButton,
                         button_node,
                         BackgroundColor(NORMAL_BUTTON),
                         MenuButtonAction::BackToSettings,
@@ -691,16 +697,13 @@ mod menu {
     }
 
     fn menu_action(
-        interaction_query: Query<
-            (&Interaction, &MenuButtonAction),
-            (Changed<Interaction>, With<Button>),
-        >,
+        pressed_query: Query<(Has<Pressed>, &MenuButtonAction), With<Button>>,
         mut app_exit_writer: MessageWriter<AppExit>,
         mut menu_state: ResMut<NextState<MenuState>>,
         mut game_state: ResMut<NextState<GameState>>,
     ) {
-        for (interaction, menu_button_action) in &interaction_query {
-            if *interaction == Interaction::Pressed {
+        for (pressed, menu_button_action) in &pressed_query {
+            if pressed {
                 match menu_button_action {
                     MenuButtonAction::Quit => {
                         app_exit_writer.write(AppExit::Success);
diff --git a/examples/helpers/widgets.rs b/examples/helpers/widgets.rs
index e30431f9b313b..7f97093340308 100644
--- a/examples/helpers/widgets.rs
+++ b/examples/helpers/widgets.rs
@@ -164,17 +164,20 @@ pub fn ui_text(label: &str, color: Color) -> impl Bundle + use<> {
 
 /// Checks for clicks on the radio buttons and sends `RadioButtonChangeEvent`s
 /// as necessary.
-pub fn handle_ui_interactions<T>(
-    mut interactions: Query<(&Interaction, &WidgetClickSender<T>), With<Button>>,
+pub fn handle_ui_button_interaction_on_click<T>(
+    click: On<Pointer<Click>>,
+    mut widget_click_sender_query: Query<
+        &WidgetClickSender<T>,
+        Or<(With<Button>, With<bevy::ui_widgets::Button>)>,
+    >,
     mut widget_click_events: MessageWriter<WidgetClickEvent<T>>,
 ) where
     T: Clone + Send + Sync + 'static,
 {
-    for (interaction, click_event) in interactions.iter_mut() {
-        if *interaction == Interaction::Pressed {
-            widget_click_events.write(WidgetClickEvent((**click_event).clone()));
-        }
-    }
+    let Ok(click_event) = widget_click_sender_query.get_mut(click.event_target()) else {
+        return;
+    };
+    widget_click_events.write(WidgetClickEvent((**click_event).clone()));
 }
 
 /// Updates the style of the button part of a radio button to reflect its
diff --git a/examples/mobile/src/lib.rs b/examples/mobile/src/lib.rs
index ac0c589e50a4c..866b967fa547b 100644
--- a/examples/mobile/src/lib.rs
+++ b/examples/mobile/src/lib.rs
@@ -3,8 +3,13 @@
 use bevy::{
     color::palettes::basic::*,
     input::{gestures::RotationGesture, touch::TouchPhase},
+    input_focus::InputDispatchPlugin,
     log::{Level, LogPlugin},
+    picking::hover::Hovered,
     prelude::*,
+    reflect::Is,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
     window::{AppLifecycle, ScreenEdge, WindowMode},
     winit::WinitSettings,
 };
@@ -15,7 +20,7 @@ use bevy::{
 /// `main.rs`.
 pub fn main() {
     let mut app = App::new();
-    app.add_plugins(
+    app.add_plugins((
         DefaultPlugins
             .set(LogPlugin {
                 // This will show some log events from Bevy to the native logger.
@@ -40,7 +45,9 @@ pub fn main() {
                 }),
                 ..default()
             }),
-    )
+        UiWidgetsPlugins,
+        InputDispatchPlugin,
+    ))
     // Make the winit loop wait more aggressively when no user input is received
     // This can help reduce cpu usage on mobile devices
     .insert_resource(WinitSettings::mobile())
@@ -49,12 +56,14 @@ pub fn main() {
         Update,
         (
             touch_camera,
-            button_handler,
             // Only run the lifetime handler when an [`AudioSink`] component exists in the world.
             // This ensures we don't try to manage audio that hasn't been initialized yet.
             handle_lifetime.run_if(any_with_component::<AudioSink>),
         ),
     )
+    .add_observer(button_on_interaction::<Add, Pressed>)
+    .add_observer(button_on_interaction::<Remove, Pressed>)
+    .add_observer(button_on_interaction::<Insert, Hovered>)
     .run();
 }
 
@@ -141,6 +150,7 @@ fn setup_scene(
     commands
         .spawn((
             Button,
+            Hovered::default(),
             Node {
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
@@ -162,23 +172,16 @@ fn setup_scene(
         ));
 }
 
-fn button_handler(
-    mut interaction_query: Query<
-        (&Interaction, &mut BackgroundColor),
-        (Changed<Interaction>, With<Button>),
-    >,
+fn button_on_interaction<E: EntityEvent, C: Component>(
+    event: On<E, C>,
+    mut button_query: Query<(&Hovered, Has<Pressed>, &mut BackgroundColor), With<Button>>,
 ) {
-    for (interaction, mut color) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
-                *color = BLUE.into();
-            }
-            Interaction::Hovered => {
-                *color = GRAY.into();
-            }
-            Interaction::None => {
-                *color = WHITE.into();
-            }
+    if let Ok((hovered, pressed, mut color)) = button_query.get_mut(event.event_target()) {
+        let pressed = pressed && !(E::is::<Remove>() && C::is::<Pressed>());
+        *color = match (hovered.get(), pressed) {
+            (true, true) => BLUE.into(),
+            (true, false) => GRAY.into(),
+            (false, _) => WHITE.into(),
         }
     }
 }
diff --git a/examples/state/computed_states.rs b/examples/state/computed_states.rs
index 0db6d39bf9602..fd32eac9c4717 100644
--- a/examples/state/computed_states.rs
+++ b/examples/state/computed_states.rs
@@ -16,8 +16,15 @@
 //! And lastly, we'll add [`Tutorial`], a computed state deriving from [`TutorialState`], [`InGame`] and [`IsPaused`], with 2 distinct
 //! states to display the 2 tutorial texts.
 
-use bevy::{dev_tools::states::*, input::keyboard::Key, prelude::*};
-
+use bevy::{
+    dev_tools::states::*,
+    input::keyboard::Key,
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
+    prelude::*,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
+};
 use ui::*;
 
 // To begin, we want to define our state objects.
@@ -167,7 +174,7 @@ impl ComputedStates for Tutorial {
 fn main() {
     // We start the setup like we did in the states example.
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         .init_state::<AppState>()
         .init_state::<TutorialState>()
         // After initializing the normal states, we'll use `.add_computed_state::<CS>()` to initialize our `ComputedStates`
@@ -179,7 +186,7 @@ fn main() {
         // using our states as normal.
         .add_systems(Startup, setup)
         .add_systems(OnEnter(AppState::Menu), setup_menu)
-        .add_systems(Update, menu.run_if(in_state(AppState::Menu)))
+        .add_systems(Update, (handle_button_interaction, menu.run_if(in_state(AppState::Menu))))
         .add_systems(OnExit(AppState::Menu), cleanup_menu)
         // We only want to run the [`setup_game`] function when we enter the [`AppState::InGame`] state, regardless
         // of whether the game is paused or not.
@@ -217,14 +224,14 @@ fn menu(
     mut next_state: ResMut<NextState<AppState>>,
     tutorial_state: Res<State<TutorialState>>,
     mut next_tutorial: ResMut<NextState<TutorialState>>,
-    mut interaction_query: Query<
-        (&Interaction, &mut BackgroundColor, &MenuButton),
-        (Changed<Interaction>, With<Button>),
+    mut button_query: Query<
+        (Has<Pressed>, &Hovered, &mut BackgroundColor, &MenuButton),
+        (Or<(Changed<Pressed>, Changed<Hovered>)>, With<Button>),
     >,
 ) {
-    for (interaction, mut color, menu_button) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
+    for (pressed, hovered, mut color, menu_button) in &mut button_query {
+        match (hovered.get(), pressed) {
+            (_, true) => {
                 *color = if menu_button == &MenuButton::Tutorial
                     && tutorial_state.get() == &TutorialState::Active
                 {
@@ -244,7 +251,7 @@ fn menu(
                     }),
                 };
             }
-            Interaction::Hovered => {
+            (true, false) => {
                 if menu_button == &MenuButton::Tutorial
                     && tutorial_state.get() == &TutorialState::Active
                 {
@@ -253,7 +260,7 @@ fn menu(
                     *color = HOVERED_BUTTON.into();
                 }
             }
-            Interaction::None => {
+            _ => {
                 if menu_button == &MenuButton::Tutorial
                     && tutorial_state.get() == &TutorialState::Active
                 {
@@ -304,6 +311,14 @@ fn quit_to_menu(input: Res<ButtonInput<KeyCode>>, mut next_state: ResMut<NextSta
 
 mod ui {
     use crate::*;
+    use bevy::{
+        color::palettes::css::*,
+        input_focus::InputDispatchPlugin,
+        picking::hover::Hovered,
+        prelude::*,
+        ui::Pressed,
+        ui_widgets::{Button, UiWidgetsPlugins},
+    };
 
     #[derive(Resource)]
     pub struct MenuData {
@@ -311,6 +326,7 @@ mod ui {
     }
 
     #[derive(Component, PartialEq, Eq)]
+    #[require(Button, Hovered)]
     pub enum MenuButton {
         Play,
         Tutorial,
@@ -343,7 +359,7 @@ mod ui {
                 },
                 children![
                     (
-                        Button,
+                        MenuButton::Play,
                         Node {
                             width: px(200),
                             height: px(65),
@@ -354,7 +370,6 @@ mod ui {
                             ..default()
                         },
                         BackgroundColor(NORMAL_BUTTON),
-                        MenuButton::Play,
                         children![(
                             Text::new("Play"),
                             TextFont {
@@ -365,7 +380,7 @@ mod ui {
                         )],
                     ),
                     (
-                        Button,
+                        MenuButton::Tutorial,
                         Node {
                             width: px(200),
                             height: px(65),
@@ -379,7 +394,6 @@ mod ui {
                             TutorialState::Active => ACTIVE_BUTTON,
                             TutorialState::Inactive => NORMAL_BUTTON,
                         }),
-                        MenuButton::Tutorial,
                         children![(
                             Text::new("Tutorial"),
                             TextFont {
diff --git a/examples/state/custom_transitions.rs b/examples/state/custom_transitions.rs
index 1297e5ee6ef3b..27f3103998d39 100644
--- a/examples/state/custom_transitions.rs
+++ b/examples/state/custom_transitions.rs
@@ -13,7 +13,15 @@
 
 use std::marker::PhantomData;
 
-use bevy::{dev_tools::states::*, ecs::schedule::ScheduleLabel, prelude::*};
+use bevy::{
+    dev_tools::states::*,
+    ecs::schedule::ScheduleLabel,
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
+    prelude::*,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
+};
 
 use custom_transitions::*;
 
@@ -29,6 +37,8 @@ fn main() {
         // We insert the custom transitions plugin for `AppState`.
         .add_plugins((
             DefaultPlugins,
+            UiWidgetsPlugins,
+            InputDispatchPlugin,
             IdentityTransitionsPlugin::<AppState>::default(),
         ))
         .init_state::<AppState>()
@@ -141,23 +151,19 @@ mod custom_transitions {
 
 fn menu(
     mut next_state: ResMut<NextState<AppState>>,
-    mut interaction_query: Query<
-        (&Interaction, &mut BackgroundColor),
-        (Changed<Interaction>, With<Button>),
+    mut buttons: Query<
+        (Has<Pressed>, &Hovered, &mut BackgroundColor),
+        (Or<(Changed<Pressed>, Changed<Hovered>)>, With<Button>),
     >,
 ) {
-    for (interaction, mut color) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
-                *color = PRESSED_BUTTON.into();
+    for (pressed, hovered, mut color) in &mut buttons {
+        match (hovered.get(), pressed) {
+            (_, true) => *color = {
                 next_state.set(AppState::InGame);
-            }
-            Interaction::Hovered => {
-                *color = HOVERED_BUTTON.into();
-            }
-            Interaction::None => {
-                *color = NORMAL_BUTTON.into();
-            }
+                PRESSED_BUTTON.into()
+            },
+            (true, false) => *color = HOVERED_BUTTON.into(),
+            _ => *color = NORMAL_BUTTON.into(),
         }
     }
 }
@@ -254,6 +260,7 @@ fn setup_menu(mut commands: Commands) {
             },
             children![(
                 Button,
+                Hovered::default(),
                 Node {
                     width: px(150),
                     height: px(65),
diff --git a/examples/state/states.rs b/examples/state/states.rs
index c36a72048515b..c50beee09bdc7 100644
--- a/examples/state/states.rs
+++ b/examples/state/states.rs
@@ -5,11 +5,17 @@
 //!
 //! In this case, we're transitioning from a `Menu` state to an `InGame` state.
 
-use bevy::prelude::*;
+use bevy::{
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
+    prelude::*,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
+};
 
 fn main() {
     let mut app = App::new();
-    app.add_plugins(DefaultPlugins)
+    app.add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         .init_state::<AppState>() // Alternatively we could use .insert_state(AppState::Menu)
         .add_systems(Startup, setup)
         // This system runs when we enter `AppState::Menu`, during the `StateTransition` schedule.
@@ -67,6 +73,7 @@ fn setup_menu(mut commands: Commands) {
             },
             children![(
                 Button,
+                Hovered::default(),
                 Node {
                     width: px(150),
                     height: px(65),
@@ -88,28 +95,25 @@ fn setup_menu(mut commands: Commands) {
             )],
         ))
         .id();
+
     commands.insert_resource(MenuData { button_entity });
 }
 
 fn menu(
     mut next_state: ResMut<NextState<AppState>>,
-    mut interaction_query: Query<
-        (&Interaction, &mut BackgroundColor),
-        (Changed<Interaction>, With<Button>),
+    mut buttons: Query<
+        (Has<Pressed>, &Hovered, &mut BackgroundColor),
+        (Or<(Changed<Pressed>, Changed<Hovered>)>, With<Button>),
     >,
 ) {
-    for (interaction, mut color) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
-                *color = PRESSED_BUTTON.into();
+    for (pressed, hovered, mut color) in &mut buttons {
+        match (hovered.get(), pressed) {
+            (_, true) => *color = {
                 next_state.set(AppState::InGame);
-            }
-            Interaction::Hovered => {
-                *color = HOVERED_BUTTON.into();
-            }
-            Interaction::None => {
-                *color = NORMAL_BUTTON.into();
-            }
+                PRESSED_BUTTON.into()
+            },
+            (true, false) => *color = HOVERED_BUTTON.into(),
+            _ => *color = NORMAL_BUTTON.into(),
         }
     }
 }
diff --git a/examples/state/sub_states.rs b/examples/state/sub_states.rs
index 491ee29c05335..6b18bf843154e 100644
--- a/examples/state/sub_states.rs
+++ b/examples/state/sub_states.rs
@@ -7,7 +7,14 @@
 //! In this case, we're transitioning from a `Menu` state to an `InGame` state, at which point we create
 //! a substate called `IsPaused` to track whether the game is paused or not.
 
-use bevy::{dev_tools::states::*, prelude::*};
+use bevy::{
+    dev_tools::states::*,
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
+    prelude::*,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
+};
 
 use ui::*;
 
@@ -34,7 +41,7 @@ enum IsPaused {
 
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         .init_state::<AppState>()
         .add_sub_state::<IsPaused>() // We set the substate up here.
         // Most of these remain the same
@@ -62,23 +69,19 @@ fn main() {
 
 fn menu(
     mut next_state: ResMut<NextState<AppState>>,
-    mut interaction_query: Query<
-        (&Interaction, &mut BackgroundColor),
-        (Changed<Interaction>, With<Button>),
+    mut buttons: Query<
+        (Has<Pressed>, &Hovered, &mut BackgroundColor),
+        (Or<(Changed<Pressed>, Changed<Hovered>)>, With<Button>),
     >,
 ) {
-    for (interaction, mut color) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
-                *color = PRESSED_BUTTON.into();
+    for (pressed, hovered, mut color) in &mut buttons {
+        match (hovered.get(), pressed) {
+            (_, true) => *color = {
                 next_state.set(AppState::InGame);
-            }
-            Interaction::Hovered => {
-                *color = HOVERED_BUTTON.into();
-            }
-            Interaction::None => {
-                *color = NORMAL_BUTTON.into();
-            }
+                PRESSED_BUTTON.into()
+            },
+            (true, false) => *color = HOVERED_BUTTON.into(),
+            _ => *color = NORMAL_BUTTON.into(),
         }
     }
 }
@@ -167,6 +170,7 @@ mod ui {
                 },
                 children![(
                     Button,
+                    Hovered::default(),
                     Node {
                         width: px(150),
                         height: px(65),
diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index 875bee2668328..bf44d15159321 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -4,6 +4,7 @@ use argh::FromArgs;
 use bevy::{
     color::palettes::css::ORANGE_RED,
     diagnostic::{FrameTimeDiagnosticsPlugin, LogDiagnosticsPlugin},
+    picking::hover::Hovered,
     prelude::*,
     text::TextColor,
     window::{PresentMode, WindowResolution},
@@ -136,16 +137,17 @@ fn set_text_colors_changed(mut colors: Query<&mut TextColor>) {
 struct IdleColor(Color);
 
 fn button_system(
-    mut interaction_query: Query<
-        (&Interaction, &mut BackgroundColor, &IdleColor),
-        Changed<Interaction>,
+    mut button_query: Query<
+        (&Hovered, &mut BackgroundColor, &IdleColor),
+        (Changed<Hovered>, With<Button>),
     >,
 ) {
-    for (interaction, mut color, &IdleColor(idle_color)) in interaction_query.iter_mut() {
-        *color = match interaction {
-            Interaction::Hovered => ORANGE_RED.into(),
-            _ => idle_color.into(),
-        };
+    for (hovered, mut color, &IdleColor(idle_color)) in button_query.iter_mut() {
+        if hovered.get() {
+            *color = ORANGE_RED.into();
+        } else {
+            *color = idle_color.into();
+        }
     }
 }
 
@@ -276,6 +278,7 @@ fn spawn_button(
     let margin = UiRect::axes(width * 0.05, height * 0.05);
     let mut builder = commands.spawn((
         Button,
+        Hovered::default(),
         Node {
             width,
             height,
diff --git a/examples/testbed/ui.rs b/examples/testbed/ui.rs
index f1daa504a4bc4..3ae74a5ac0b1b 100644
--- a/examples/testbed/ui.rs
+++ b/examples/testbed/ui.rs
@@ -960,7 +960,6 @@ mod overflow {
                                     min_height: px(100),
                                     ..default()
                                 },
-                                Interaction::default(),
                                 Outline {
                                     width: px(2),
                                     offset: px(2),
diff --git a/examples/ui/images/ui_texture_atlas_slice.rs b/examples/ui/images/ui_texture_atlas_slice.rs
index 0254157ad12b9..a52927e798860 100644
--- a/examples/ui/images/ui_texture_atlas_slice.rs
+++ b/examples/ui/images/ui_texture_atlas_slice.rs
@@ -3,40 +3,46 @@
 
 use bevy::{
     color::palettes::css::{GOLD, ORANGE},
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
     prelude::*,
-    ui::widget::NodeImageMode,
+    reflect::Is,
+    ui::{widget::NodeImageMode, Pressed},
+    ui_widgets::{Button, UiWidgetsPlugins},
 };
 
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         .add_systems(Startup, setup)
-        .add_systems(Update, button_system)
+        .add_observer(button_on_interaction::<Add, Pressed>)
+        .add_observer(button_on_interaction::<Remove, Pressed>)
+        .add_observer(button_on_interaction::<Insert, Hovered>)
         .run();
 }
 
-fn button_system(
-    mut interaction_query: Query<
-        (&Interaction, &Children, &mut ImageNode),
-        (Changed<Interaction>, With<Button>),
-    >,
+fn button_on_interaction<E: EntityEvent, C: Component>(
+    event: On<E, C>,
+    mut buttons: Query<(&Hovered, Has<Pressed>, &Children, &mut ImageNode), With<Button>>,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, children, mut image) in &mut interaction_query {
+    if let Ok((hovered, pressed, children, mut image)) = buttons.get_mut(event.event_target()) {
         let mut text = text_query.get_mut(children[0]).unwrap();
-        match *interaction {
-            Interaction::Pressed => {
+        let hovered = hovered.get();
+        let pressed = pressed && !(E::is::<Remove>() && C::is::<Pressed>());
+        match (hovered, pressed) {
+            (true, true) => {
                 **text = "Press".to_string();
                 if let Some(atlas) = &mut image.texture_atlas {
                     atlas.index = (atlas.index + 1) % 30;
                 }
                 image.color = GOLD.into();
             }
-            Interaction::Hovered => {
+            (true, false) => {
                 **text = "Hover".to_string();
                 image.color = ORANGE.into();
             }
-            Interaction::None => {
+            (false, _) => {
                 **text = "Button".to_string();
                 image.color = Color::WHITE;
             }
@@ -79,6 +85,7 @@ fn setup(
                 parent
                     .spawn((
                         Button,
+                        Hovered::default(),
                         ImageNode::from_atlas_image(
                             texture_handle.clone(),
                             TextureAtlas {
diff --git a/examples/ui/images/ui_texture_slice.rs b/examples/ui/images/ui_texture_slice.rs
index b9f25fac77cec..9d4dc82e6fa18 100644
--- a/examples/ui/images/ui_texture_slice.rs
+++ b/examples/ui/images/ui_texture_slice.rs
@@ -3,37 +3,43 @@
 
 use bevy::{
     color::palettes::css::{GOLD, ORANGE},
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
     prelude::*,
-    ui::widget::NodeImageMode,
+    reflect::Is,
+    ui::{widget::NodeImageMode, Pressed},
+    ui_widgets::{Button, UiWidgetsPlugins},
 };
 
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         .add_systems(Startup, setup)
-        .add_systems(Update, button_system)
+        .add_observer(button_on_interaction::<Add, Pressed>)
+        .add_observer(button_on_interaction::<Remove, Pressed>)
+        .add_observer(button_on_interaction::<Insert, Hovered>)
         .run();
 }
 
-fn button_system(
-    mut interaction_query: Query<
-        (&Interaction, &Children, &mut ImageNode),
-        (Changed<Interaction>, With<Button>),
-    >,
+fn button_on_interaction<E: EntityEvent, C: Component>(
+    event: On<E, C>,
+    mut buttons: Query<(&Hovered, Has<Pressed>, &Children, &mut ImageNode), With<Button>>,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, children, mut image) in &mut interaction_query {
+    if let Ok((hovered, pressed, children, mut image)) = buttons.get_mut(event.event_target()) {
         let mut text = text_query.get_mut(children[0]).unwrap();
-        match *interaction {
-            Interaction::Pressed => {
+        let hovered = hovered.get();
+        let pressed = pressed && !(E::is::<Remove>() && C::is::<Pressed>());
+        match (hovered, pressed) {
+            (true, true) => {
                 **text = "Press".to_string();
                 image.color = GOLD.into();
             }
-            Interaction::Hovered => {
+            (true, false) => {
                 **text = "Hover".to_string();
                 image.color = ORANGE.into();
             }
-            Interaction::None => {
+            (false, _) => {
                 **text = "Button".to_string();
                 image.color = Color::WHITE;
             }
@@ -65,6 +71,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 parent
                     .spawn((
                         Button,
+                        Hovered::default(),
                         ImageNode {
                             image: image.clone(),
                             image_mode: NodeImageMode::Sliced(slicer.clone()),
diff --git a/examples/ui/layout/display_and_visibility.rs b/examples/ui/layout/display_and_visibility.rs
index cff407f9b0ec0..0a7a55a8fcfbd 100644
--- a/examples/ui/layout/display_and_visibility.rs
+++ b/examples/ui/layout/display_and_visibility.rs
@@ -3,6 +3,7 @@
 use bevy::{
     color::palettes::css::{DARK_CYAN, DARK_GRAY, YELLOW},
     ecs::{component::Mutable, hierarchy::ChildSpawnerCommands},
+    picking::hover::Hovered,
     prelude::*,
 };
 
@@ -13,14 +14,9 @@ fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
-        .add_systems(
-            Update,
-            (
-                buttons_handler::<Display>,
-                buttons_handler::<Visibility>,
-                text_hover,
-            ),
-        )
+        .add_systems(Update, (text_hover,))
+        .add_observer(buttons_handler::<Display>)
+        .add_observer(buttons_handler::<Visibility>)
         .run();
 }
 
@@ -381,6 +377,7 @@ where
     parent
         .spawn((
             Button,
+            Hovered::default(),
             Node {
                 align_self: AlignSelf::FlexStart,
                 padding: UiRect::axes(px(5), px(1)),
@@ -399,56 +396,56 @@ where
 }
 
 fn buttons_handler<T>(
+    press: On<Pointer<Click>>,
     mut left_panel_query: Query<&mut <Target<T> as TargetUpdate>::TargetComponent>,
-    mut visibility_button_query: Query<(&Target<T>, &Interaction, &Children), Changed<Interaction>>,
+    visibility_button_query: Query<(&Target<T>, &Children)>,
     mut text_query: Query<(&mut Text, &mut TextColor)>,
 ) where
     T: Send + Sync,
     Target<T>: TargetUpdate + Component,
 {
-    for (target, interaction, children) in visibility_button_query.iter_mut() {
-        if matches!(interaction, Interaction::Pressed) {
-            let mut target_value = left_panel_query.get_mut(target.id).unwrap();
-            for &child in children {
-                if let Ok((mut text, mut text_color)) = text_query.get_mut(child) {
-                    **text = target.update_target(target_value.as_mut());
-                    text_color.0 = if text.contains("None") || text.contains("Hidden") {
-                        Color::srgb(1.0, 0.7, 0.7)
-                    } else {
-                        Color::WHITE
-                    };
-                }
-            }
+    let Ok((target, children)) = visibility_button_query.get(press.event_target()) else {
+        return;
+    };
+    let mut target_value = left_panel_query.get_mut(target.id).unwrap();
+    for &child in children {
+        if let Ok((mut text, mut text_color)) = text_query.get_mut(child) {
+            **text = target.update_target(target_value.as_mut());
+            text_color.0 = if text.contains("None") || text.contains("Hidden") {
+                Color::srgb(1.0, 0.7, 0.7)
+            } else {
+                Color::WHITE
+            };
         }
     }
 }
 
 fn text_hover(
-    mut button_query: Query<(&Interaction, &mut BackgroundColor, &Children), Changed<Interaction>>,
+    mut button_query: Query<
+        (&Hovered, &mut BackgroundColor, &Children),
+        (Changed<Hovered>, With<Button>),
+    >,
     mut text_query: Query<(&Text, &mut TextColor)>,
 ) {
-    for (interaction, mut color, children) in button_query.iter_mut() {
-        match interaction {
-            Interaction::Hovered => {
-                *color = Color::BLACK.with_alpha(0.6).into();
-                for &child in children {
-                    if let Ok((_, mut text_color)) = text_query.get_mut(child) {
-                        // Bypass change detection to avoid recomputation of the text when only changing the color
-                        text_color.bypass_change_detection().0 = YELLOW.into();
-                    }
+    for (hovered, mut color, children) in button_query.iter_mut() {
+        if hovered.get() {
+            *color = Color::BLACK.with_alpha(0.6).into();
+            for &child in children {
+                if let Ok((_, mut text_color)) = text_query.get_mut(child) {
+                    // Bypass change detection to avoid recomputation of the text when only changing the color
+                    text_color.bypass_change_detection().0 = YELLOW.into();
                 }
             }
-            _ => {
-                *color = Color::BLACK.with_alpha(0.5).into();
-                for &child in children {
-                    if let Ok((text, mut text_color)) = text_query.get_mut(child) {
-                        text_color.bypass_change_detection().0 =
-                            if text.contains("None") || text.contains("Hidden") {
-                                HIDDEN_COLOR
-                            } else {
-                                Color::WHITE
-                            };
-                    }
+        } else {
+            *color = Color::BLACK.with_alpha(0.5).into();
+            for &child in children {
+                if let Ok((text, mut text_color)) = text_query.get_mut(child) {
+                    text_color.bypass_change_detection().0 =
+                        if text.contains("None") || text.contains("Hidden") {
+                            HIDDEN_COLOR
+                        } else {
+                            Color::WHITE
+                        };
                 }
             }
         }
diff --git a/examples/ui/layout/ghost_nodes.rs b/examples/ui/layout/ghost_nodes.rs
index 5d843a16df9d0..4e62bcbf92fb2 100644
--- a/examples/ui/layout/ghost_nodes.rs
+++ b/examples/ui/layout/ghost_nodes.rs
@@ -15,7 +15,7 @@ fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
-        .add_systems(Update, button_system)
+        .add_observer(handle_buttons)
         .run();
 }
 
@@ -100,19 +100,20 @@ fn create_label(text: &str, font: Handle<Font>) -> (Text, TextFont, TextColor) {
     )
 }
 
-fn button_system(
-    mut interaction_query: Query<(&Interaction, &ChildOf), (Changed<Interaction>, With<Button>)>,
+fn handle_buttons(
+    click: On<Pointer<Click>>,
+    mut button_query: Query<&ChildOf, With<Button>>,
     labels_query: Query<(&Children, &ChildOf), With<Button>>,
     mut text_query: Query<&mut Text>,
     mut counter_query: Query<&mut Counter>,
 ) {
+    let Ok(child_of) = button_query.get(click.event_target()) else {
+        return;
+    };
+
     // Update parent counter on click
-    for (interaction, child_of) in &mut interaction_query {
-        if matches!(interaction, Interaction::Pressed) {
-            let mut counter = counter_query.get_mut(child_of.parent()).unwrap();
-            counter.0 += 1;
-        }
-    }
+    let mut counter = counter_query.get_mut(child_of.parent()).unwrap();
+    counter.0 += 1;
 
     // Update button labels to match their parent counter
     for (children, child_of) in &labels_query {
diff --git a/examples/ui/layout/size_constraints.rs b/examples/ui/layout/size_constraints.rs
index 2d450aa019f9b..32132a2d21afd 100644
--- a/examples/ui/layout/size_constraints.rs
+++ b/examples/ui/layout/size_constraints.rs
@@ -1,10 +1,17 @@
 //! Demonstrates how the to use the size constraints to control the size of a UI node.
 
-use bevy::{color::palettes::css::*, prelude::*};
+use bevy::{
+    color::palettes::css::*,
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
+    prelude::*,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
+};
 
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         .add_message::<ButtonActivated>()
         .add_systems(Startup, setup)
         .add_systems(Update, (update_buttons, update_radio_buttons_colors))
@@ -214,6 +221,7 @@ fn spawn_button(
     parent
         .spawn((
             Button,
+            Hovered::default(),
             Node {
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
@@ -257,18 +265,18 @@ fn spawn_button(
 }
 
 fn update_buttons(
-    mut button_query: Query<
-        (Entity, &Interaction, &Constraint, &ButtonValue),
-        Changed<Interaction>,
+    mut buttons: Query<
+        (Entity, Has<Pressed>, &Hovered, &Constraint, &ButtonValue),
+        (Or<(Changed<Pressed>, Changed<Hovered>)>, With<Button>),
     >,
     mut bar_node: Single<&mut Node, With<Bar>>,
     mut text_query: Query<&mut TextColor>,
     children_query: Query<&Children>,
     mut button_activated_writer: MessageWriter<ButtonActivated>,
 ) {
-    for (button_id, interaction, constraint, value) in button_query.iter_mut() {
-        match interaction {
-            Interaction::Pressed => {
+    for (button_id, pressed, hovered, constraint, value) in &mut buttons {
+        match (hovered.get(), pressed) {
+            (_, true) => {
                 button_activated_writer.write(ButtonActivated(button_id));
                 match constraint {
                     Constraint::FlexBasis => {
@@ -285,7 +293,7 @@ fn update_buttons(
                     }
                 }
             }
-            Interaction::Hovered => {
+            (true, false) => {
                 if let Ok(children) = children_query.get(button_id) {
                     for &child in children {
                         if let Ok(grand_children) = children_query.get(child) {
@@ -300,7 +308,7 @@ fn update_buttons(
                     }
                 }
             }
-            Interaction::None => {
+            _ => {
                 if let Ok(children) = children_query.get(button_id) {
                     for &child in children {
                         if let Ok(grand_children) = children_query.get(child) {
@@ -321,7 +329,7 @@ fn update_buttons(
 
 fn update_radio_buttons_colors(
     mut button_activated_reader: MessageReader<ButtonActivated>,
-    button_query: Query<(Entity, &Constraint, &Interaction)>,
+    button_query: Query<(Entity, &Constraint, &Hovered), With<Button>>,
     mut border_query: Query<&mut BorderColor>,
     mut color_query: Query<&mut BackgroundColor>,
     mut text_query: Query<&mut TextColor>,
@@ -329,7 +337,7 @@ fn update_radio_buttons_colors(
 ) {
     for &ButtonActivated(button_id) in button_activated_reader.read() {
         let (_, target_constraint, _) = button_query.get(button_id).unwrap();
-        for (id, constraint, interaction) in button_query.iter() {
+        for (id, constraint, hovered) in button_query.iter() {
             if target_constraint == constraint {
                 let (border_color, inner_color, label_color) = if id == button_id {
                     (ACTIVE_BORDER_COLOR, ACTIVE_INNER_COLOR, ACTIVE_TEXT_COLOR)
@@ -337,7 +345,7 @@ fn update_radio_buttons_colors(
                     (
                         INACTIVE_BORDER_COLOR,
                         INACTIVE_INNER_COLOR,
-                        if matches!(interaction, Interaction::Hovered) {
+                        if hovered.get() {
                             HOVERED_TEXT_COLOR
                         } else {
                             UNHOVERED_TEXT_COLOR
diff --git a/examples/ui/scroll_and_overflow/overflow.rs b/examples/ui/scroll_and_overflow/overflow.rs
index 2af51bf5c5fbd..e3147805cbd23 100644
--- a/examples/ui/scroll_and_overflow/overflow.rs
+++ b/examples/ui/scroll_and_overflow/overflow.rs
@@ -1,12 +1,22 @@
 //! Simple example demonstrating overflow behavior.
 
-use bevy::{color::palettes::css::*, prelude::*};
+use bevy::{
+    color::palettes::css::*,
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
+    prelude::*,
+    reflect::Is,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
+};
 
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         .add_systems(Startup, setup)
-        .add_systems(Update, update_outlines)
+        .add_observer(update_outlines_on_interaction::<Add, Pressed>)
+        .add_observer(update_outlines_on_interaction::<Remove, Pressed>)
+        .add_observer(update_outlines_on_interaction::<Insert, Hovered>)
         .run();
 }
 
@@ -81,7 +91,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                         min_height: px(100),
                                         ..default()
                                     },
-                                    Interaction::default(),
+                                    Button,
+                                    Hovered::default(),
                                     Outline {
                                         width: px(2),
                                         offset: px(2),
@@ -94,14 +105,20 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         });
 }
 
-fn update_outlines(mut outlines_query: Query<(&mut Outline, Ref<Interaction>)>) {
-    for (mut outline, interaction) in outlines_query.iter_mut() {
-        if interaction.is_changed() {
-            outline.color = match *interaction {
-                Interaction::Pressed => RED.into(),
-                Interaction::Hovered => WHITE.into(),
-                Interaction::None => Color::NONE,
-            };
+fn update_outlines_on_interaction<E: EntityEvent, C: Component>(
+    event: On<E, C>,
+    mut outline_query: Query<
+        (&Hovered, Has<Pressed>, &mut Outline),
+        With<Button>
+    >,
+) {
+    if let Ok((hovered, pressed, mut outline)) = outline_query.get_mut(event.event_target()) {
+        let hovered = hovered.get();
+        let pressed = pressed && !(E::is::<Remove>() && C::is::<Pressed>());
+        outline.color = match (hovered, pressed) {
+            (true, true) => RED.into(),
+            (true, false) => WHITE.into(),
+            (false, _) => Color::NONE,
         }
     }
 }
diff --git a/examples/ui/styling/box_shadow.rs b/examples/ui/styling/box_shadow.rs
index fe34495751886..3de28fd31bedf 100644
--- a/examples/ui/styling/box_shadow.rs
+++ b/examples/ui/styling/box_shadow.rs
@@ -1,6 +1,16 @@
 //! This example shows how to create a node with a shadow and adjust its settings interactively.
 
-use bevy::{color::palettes::css::*, prelude::*, time::Time, window::RequestRedraw};
+use bevy::{
+    color::palettes::css::*,
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
+    prelude::*,
+    reflect::Is,
+    time::Time,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
+    window::RequestRedraw,
+};
 
 const NORMAL_BUTTON: Color = Color::srgb(0.15, 0.15, 0.15);
 const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
@@ -116,16 +126,17 @@ struct HeldButton {
 
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         .insert_resource(SHADOW_DEFAULT_SETTINGS)
         .insert_resource(SHAPE_DEFAULT_SETTINGS)
         .insert_resource(HeldButton::default())
         .add_systems(Startup, setup)
+        .add_observer(button_on_interaction::<Add, Pressed>)
+        .add_observer(button_on_interaction::<Remove, Pressed>)
+        .add_observer(button_on_interaction::<Insert, Hovered>)
         .add_systems(
             Update,
             (
-                button_system,
-                button_color_system,
                 update_shape.run_if(resource_changed::<ShapeSettings>),
                 update_shadow.run_if(resource_changed::<ShadowSettings>),
                 update_shadow_samples.run_if(resource_changed::<ShadowSettings>),
@@ -261,6 +272,7 @@ fn setup(
                 },
                 children![(
                     Button,
+                    Hovered::default(),
                     Node {
                         width: px(90),
                         height: px(32),
@@ -327,6 +339,7 @@ fn build_setting_row(
             ),
             (
                 Button,
+                Hovered::default(),
                 Node {
                     width: px(28),
                     height: px(28),
@@ -375,6 +388,7 @@ fn build_setting_row(
             ),
             (
                 Button,
+                Hovered::default(),
                 Node {
                     width: px(28),
                     height: px(28),
@@ -515,32 +529,45 @@ fn update_shape(
     }
 }
 
-// Handles button interactions for all settings
-fn button_system(
-    mut interaction_query: Query<
-        (&Interaction, &SettingsButton),
-        (Changed<Interaction>, With<Button>),
+// Handles button interactions for all settings and button colors
+fn button_on_interaction<E: EntityEvent, C: Component>(
+    event: On<E, C>,
+    mut buttons: Query<
+        (&mut BackgroundColor, &Hovered, Has<Pressed>, &SettingsButton),
+        With<Button>
     >,
     mut shadow: ResMut<ShadowSettings>,
     mut shape: ResMut<ShapeSettings>,
     mut held: ResMut<HeldButton>,
     time: Res<Time>,
 ) {
-    let now = time.elapsed_secs_f64();
-    for (interaction, btn) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
+    if let Ok((mut color, hovered, pressed, btn)) = buttons.get_mut(event.event_target()) {
+        let now = time.elapsed_secs_f64();
+        let hovered = hovered.get();
+        let pressed = pressed && !(E::is::<Remove>() && C::is::<Pressed>());
+        match (hovered, pressed) {
+            (true, true) => {
                 trigger_button_action(btn, &mut shadow, &mut shape);
                 held.button = Some(*btn);
                 held.pressed_at = Some(now);
                 held.last_repeat = Some(now);
+                *color = PRESSED_BUTTON.into();
+            }
+            (true, false) => {
+                if held.button == Some(*btn) {
+                    held.button = None;
+                    held.pressed_at = None;
+                    held.last_repeat = None;
+                }
+                *color = HOVERED_BUTTON.into();
             }
-            Interaction::None | Interaction::Hovered => {
+            (false, _) => {
                 if held.button == Some(*btn) {
                     held.button = None;
                     held.pressed_at = None;
                     held.last_repeat = None;
                 }
+                *color = NORMAL_BUTTON.into();
             }
         }
     }
@@ -617,19 +644,3 @@ fn button_repeat_system(
         }
     }
 }
-
-// Changes color of button on hover and on pressed
-fn button_color_system(
-    mut query: Query<
-        (&Interaction, &mut BackgroundColor),
-        (Changed<Interaction>, With<Button>, With<SettingsButton>),
-    >,
-) {
-    for (interaction, mut color) in &mut query {
-        match *interaction {
-            Interaction::Pressed => *color = PRESSED_BUTTON.into(),
-            Interaction::Hovered => *color = HOVERED_BUTTON.into(),
-            Interaction::None => *color = NORMAL_BUTTON.into(),
-        }
-    }
-}
diff --git a/examples/ui/ui_transform.rs b/examples/ui/ui_transform.rs
index b559c938f4a3c..a341ff60969a6 100644
--- a/examples/ui/ui_transform.rs
+++ b/examples/ui/ui_transform.rs
@@ -2,12 +2,18 @@
 use bevy::color::palettes::css::DARK_GRAY;
 use bevy::color::palettes::css::RED;
 use bevy::color::palettes::css::YELLOW;
-use bevy::prelude::*;
+use bevy::{
+    input_focus::InputDispatchPlugin,
+    picking::hover::Hovered,
+    prelude::*,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
+};
 use core::f32::consts::FRAC_PI_8;
 
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         .add_systems(Startup, setup)
         .add_systems(Update, button_system)
         .add_systems(Update, translation_system)
@@ -32,20 +38,15 @@ pub struct TargetNode;
 
 /// Handles button interactions
 fn button_system(
-    mut interaction_query: Query<
-        (
-            &Interaction,
-            &mut BackgroundColor,
-            Option<&RotateButton>,
-            Option<&ScaleButton>,
-        ),
-        (Changed<Interaction>, With<Button>),
+    mut buttons: Query<
+        (Has<Pressed>, &Hovered, &mut BackgroundColor, Option<&RotateButton>, Option<&ScaleButton>),
+        (Or<(Changed<Pressed>, Changed<Hovered>)>, With<Button>),
     >,
     mut rotator_query: Query<&mut UiTransform, With<TargetNode>>,
 ) {
-    for (interaction, mut color, maybe_rotate, maybe_scale) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
+    for (pressed, hovered, mut color, maybe_rotate, maybe_scale) in &mut buttons {
+        match (hovered.get(), pressed) {
+            (_, true) => {
                 *color = PRESSED_BUTTON.into();
                 if let Some(step) = maybe_rotate {
                     for mut transform in rotator_query.iter_mut() {
@@ -60,10 +61,10 @@ fn button_system(
                     }
                 }
             }
-            Interaction::Hovered => {
+            (true, false) => {
                 *color = HOVERED_BUTTON.into();
             }
-            Interaction::None => {
+            _ => {
                 *color = NORMAL_BUTTON.into();
             }
         }
@@ -137,6 +138,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     children![
                         (
                             Button,
+                            Hovered::default(),
                             Node {
                                 height: px(50),
                                 width: px(50),
@@ -150,6 +152,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         ),
                         (
                             Button,
+                            Hovered::default(),
                             Node {
                                 height: px(50),
                                 width: px(50),
@@ -178,6 +181,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     children![
                         (
                             Button,
+                            Hovered::default(),
                             Node {
                                 width: px(80),
                                 height: px(80),
@@ -198,6 +202,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             children![
                                 (
                                     Button,
+                                    Hovered::default(),
                                     Node {
                                         width: px(80),
                                         height: px(80),
@@ -225,6 +230,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 ),
                                 (
                                     Button,
+                                    Hovered::default(),
                                     Node {
                                         width: px(80),
                                         height: px(80),
@@ -242,6 +248,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         ),
                         (
                             Button,
+                            Hovered::default(),
                             Node {
                                 width: px(80),
                                 height: px(80),
@@ -270,6 +277,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     children![
                         (
                             Button,
+                            Hovered::default(),
                             Node {
                                 height: px(50),
                                 width: px(50),
@@ -283,6 +291,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         ),
                         (
                             Button,
+                            Hovered::default(),
                             Node {
                                 height: px(50),
                                 width: px(50),
diff --git a/examples/ui/widgets/button.rs b/examples/ui/widgets/button.rs
index 6d7d42d8911a5..936065c3e08fe 100644
--- a/examples/ui/widgets/button.rs
+++ b/examples/ui/widgets/button.rs
@@ -1,15 +1,25 @@
 //! This example illustrates how to create a button that changes color and text based on its
 //! interaction state.
 
-use bevy::{color::palettes::basic::*, input_focus::InputFocus, prelude::*};
+use bevy::{
+    color::palettes::basic::*,
+    input_focus::{InputDispatchPlugin, InputFocus},
+    picking::hover::Hovered,
+    prelude::*,
+    reflect::Is,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
+};
 
 fn main() {
     App::new()
-        .add_plugins(DefaultPlugins)
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
         // `InputFocus` must be set for accessibility to recognize the button.
         .init_resource::<InputFocus>()
         .add_systems(Startup, setup)
-        .add_systems(Update, button_system)
+        .add_observer(button_on_interaction::<Add, Pressed>)
+        .add_observer(button_on_interaction::<Remove, Pressed>)
+        .add_observer(button_on_interaction::<Insert, Hovered>)
         .run();
 }
 
@@ -17,28 +27,22 @@ const NORMAL_BUTTON: Color = Color::srgb(0.15, 0.15, 0.15);
 const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
 const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
 
-fn button_system(
+fn button_on_interaction<E: EntityEvent, C: Component>(
+    event: On<E, C>,
     mut input_focus: ResMut<InputFocus>,
-    mut interaction_query: Query<
-        (
-            Entity,
-            &Interaction,
-            &mut BackgroundColor,
-            &mut BorderColor,
-            &mut Button,
-            &Children,
-        ),
-        Changed<Interaction>,
+    mut button_query: Query<
+        (Entity, &Hovered, Has<Pressed>, &mut BackgroundColor, &mut BorderColor, &mut Button, &Children),
+        With<Button>
     >,
     mut text_query: Query<&mut Text>,
 ) {
-    for (entity, interaction, mut color, mut border_color, mut button, children) in
-        &mut interaction_query
-    {
-        let mut text = text_query.get_mut(children[0]).unwrap();
-
-        match *interaction {
-            Interaction::Pressed => {
+    if let Ok((entity, hovered, pressed, mut color, mut border_color, mut button, children)) = button_query.get_mut(event.event_target()) {
+        let Some(child) = children.first() else { return; };
+        let mut text = text_query.get_mut(*child).unwrap();
+        let hovered = hovered.get();
+        let pressed = pressed && !(E::is::<Remove>() && C::is::<Pressed>());
+        match (hovered, pressed) {
+            (true, true) => {
                 input_focus.set(entity);
                 **text = "Press".to_string();
                 *color = PRESSED_BUTTON.into();
@@ -47,14 +51,14 @@ fn button_system(
                 // The accessibility system's only update the button's state when the `Button` component is marked as changed.
                 button.set_changed();
             }
-            Interaction::Hovered => {
+            (true, false) => {
                 input_focus.set(entity);
                 **text = "Hover".to_string();
                 *color = HOVERED_BUTTON.into();
                 *border_color = BorderColor::all(Color::WHITE);
                 button.set_changed();
             }
-            Interaction::None => {
+            (false, _) => {
                 input_focus.clear();
                 **text = "Button".to_string();
                 *color = NORMAL_BUTTON.into();
@@ -81,6 +85,7 @@ fn button(asset_server: &AssetServer) -> impl Bundle {
         },
         children![(
             Button,
+            Hovered::default(),
             Node {
                 width: px(150),
                 height: px(65),
diff --git a/examples/ui/widgets/tab_navigation.rs b/examples/ui/widgets/tab_navigation.rs
index 2755d0fdf1a0b..35e8cdbb94a6c 100644
--- a/examples/ui/widgets/tab_navigation.rs
+++ b/examples/ui/widgets/tab_navigation.rs
@@ -6,14 +6,24 @@ use bevy::{
         tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
         InputDispatchPlugin, InputFocus,
     },
+    picking::hover::Hovered,
     prelude::*,
+    reflect::Is,
+    ui::Pressed,
+    ui_widgets::{Button, UiWidgetsPlugins},
 };
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, InputDispatchPlugin, TabNavigationPlugin))
+        .add_plugins((
+            DefaultPlugins, UiWidgetsPlugins,
+            InputDispatchPlugin, TabNavigationPlugin,
+        ))
         .add_systems(Startup, setup)
-        .add_systems(Update, (button_system, focus_system))
+        .add_systems(Update, focus_system)
+        .add_observer(button_on_interaction::<Add, Pressed>)
+        .add_observer(button_on_interaction::<Remove, Pressed>)
+        .add_observer(button_on_interaction::<Insert, Hovered>)
         .run();
 }
 
@@ -21,23 +31,26 @@ const NORMAL_BUTTON: Color = Color::srgb(0.15, 0.15, 0.15);
 const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
 const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
 
-fn button_system(
-    mut interaction_query: Query<
-        (&Interaction, &mut BackgroundColor, &mut BorderColor),
-        (Changed<Interaction>, With<Button>),
+fn button_on_interaction<E: EntityEvent, C: Component>(
+    event: On<E, C>,
+    mut button_query: Query<
+        (&Hovered, Has<Pressed>, &mut BackgroundColor, &mut BorderColor),
+        With<Button>
     >,
 ) {
-    for (interaction, mut color, mut border_color) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
+    if let Ok((hovered, pressed, mut color, mut border_color)) = button_query.get_mut(event.event_target()) {
+        let hovered = hovered.get();
+        let pressed = pressed && !(E::is::<Remove>() && C::is::<Pressed>());
+        match (hovered, pressed) {
+            (true, true) => {
                 *color = PRESSED_BUTTON.into();
                 *border_color = BorderColor::all(RED);
             }
-            Interaction::Hovered => {
+            (true, false) => {
                 *color = HOVERED_BUTTON.into();
                 *border_color = BorderColor::all(Color::WHITE);
             }
-            Interaction::None => {
+            (false, _) => {
                 *color = NORMAL_BUTTON.into();
                 *border_color = BorderColor::all(Color::BLACK);
             }
@@ -116,6 +129,7 @@ fn setup(mut commands: Commands) {
                             parent
                                 .spawn((
                                     Button,
+                                    Hovered::default(),
                                     Node {
                                         width: px(200),
                                         height: px(65),
diff --git a/examples/usage/cooldown.rs b/examples/usage/cooldown.rs
index c08384737f0e5..c5cfc58c64bc6 100644
--- a/examples/usage/cooldown.rs
+++ b/examples/usage/cooldown.rs
@@ -11,11 +11,9 @@ fn main() {
         .add_systems(Startup, setup)
         .add_systems(
             Update,
-            (
-                activate_ability,
-                animate_cooldowns.run_if(any_with_component::<ActiveCooldown>),
-            ),
+            animate_cooldowns.run_if(any_with_component::<ActiveCooldown>),
         )
+        .add_observer(activate_ability_on_press)
         .run();
 }
 
@@ -126,36 +124,33 @@ struct Cooldown(Timer);
 #[component(storage = "SparseSet")]
 struct ActiveCooldown;
 
-fn activate_ability(
+fn activate_ability_on_press(
+    press: On<Pointer<Click>>,
     mut commands: Commands,
-    mut interaction_query: Query<
+    mut button_query: Query<
         (
             Entity,
-            &Interaction,
             &mut Cooldown,
             &Name,
             Option<&ActiveCooldown>,
         ),
-        (Changed<Interaction>, With<Button>),
+        With<Button>,
     >,
-    mut text: Query<&mut Text>,
-) -> Result {
-    for (entity, interaction, mut cooldown, name, on_cooldown) in &mut interaction_query {
-        if *interaction == Interaction::Pressed {
-            if on_cooldown.is_none() {
-                cooldown.0.reset();
-                commands.entity(entity).insert(ActiveCooldown);
-                **text.single_mut()? = format!("You ate {name}");
-            } else {
-                **text.single_mut()? = format!(
-                    "You can eat {name} again in {} seconds.",
-                    cooldown.0.remaining_secs().ceil()
-                );
-            }
-        }
+    mut text: Single<&mut Text>,
+) {
+    let Ok((entity, mut cooldown, name, on_cooldown)) = button_query.get_mut(press.event_target()) else {
+        return;
+    };
+    if on_cooldown.is_none() {
+        cooldown.0.reset();
+        commands.entity(entity).insert(ActiveCooldown);
+        **text = format!("You ate {name}").into();
+    } else {
+        **text = format!(
+            "You can eat {name} again in {} seconds.",
+            cooldown.0.remaining_secs().ceil()
+        ).into();
     }
-
-    Ok(())
 }
 
 fn animate_cooldowns(

From 4e6879c86d3fdeb0d7d54c03f395db68f6140d1c Mon Sep 17 00:00:00 2001
From: Luke Yoo <w.lukeyoo@gmail.com>
Date: Mon, 9 Mar 2026 16:22:34 -0700
Subject: [PATCH 2/8] Include `InputDispatchPlugin` in `DefaultPlugins`

---
 crates/bevy_input_focus/src/lib.rs                        | 1 +
 crates/bevy_internal/src/default_plugins.rs               | 1 +
 examples/3d/mirror.rs                                     | 2 --
 examples/animation/animation_graph.rs                     | 2 --
 examples/animation/animation_masks.rs                     | 4 ++--
 examples/games/game_menu.rs                               | 4 ++--
 examples/mobile/src/lib.rs                                | 2 --
 examples/state/computed_states.rs                         | 4 +---
 examples/state/custom_transitions.rs                      | 2 --
 examples/state/states.rs                                  | 3 +--
 examples/state/sub_states.rs                              | 3 +--
 examples/ui/images/ui_texture_atlas_slice.rs              | 3 +--
 examples/ui/images/ui_texture_slice.rs                    | 3 +--
 examples/ui/layout/size_constraints.rs                    | 3 +--
 examples/ui/navigation/directional_navigation.rs          | 3 +--
 .../ui/navigation/directional_navigation_overrides.rs     | 8 ++------
 examples/ui/scroll_and_overflow/overflow.rs               | 3 +--
 examples/ui/scroll_and_overflow/scrollbars.rs             | 6 +-----
 examples/ui/styling/box_shadow.rs                         | 3 +--
 examples/ui/ui_transform.rs                               | 3 +--
 examples/ui/widgets/button.rs                             | 4 ++--
 examples/ui/widgets/standard_widgets.rs                   | 3 +--
 examples/ui/widgets/standard_widgets_observers.rs         | 6 +-----
 examples/ui/widgets/tab_navigation.rs                     | 7 ++-----
 examples/ui/widgets/vertical_slider.rs                    | 6 +-----
 examples/usage/cooldown.rs                                | 4 ++--
 26 files changed, 28 insertions(+), 65 deletions(-)

diff --git a/crates/bevy_input_focus/src/lib.rs b/crates/bevy_input_focus/src/lib.rs
index 47efd05797875..a82a0bc475203 100644
--- a/crates/bevy_input_focus/src/lib.rs
+++ b/crates/bevy_input_focus/src/lib.rs
@@ -219,6 +219,7 @@ impl Traversal<AcquireFocus> for WindowTraversal {
 ///
 /// To add bubbling to your own input events, add the [`dispatch_focused_input::<MyEvent>`](dispatch_focused_input) system to your app,
 /// as described in the docs for [`FocusedInput`].
+#[derive(Default)]
 pub struct InputDispatchPlugin;
 
 impl Plugin for InputDispatchPlugin {
diff --git a/crates/bevy_internal/src/default_plugins.rs b/crates/bevy_internal/src/default_plugins.rs
index 0f75594b7bf91..ffaabea889787 100644
--- a/crates/bevy_internal/src/default_plugins.rs
+++ b/crates/bevy_internal/src/default_plugins.rs
@@ -12,6 +12,7 @@ plugin_group! {
         bevy_transform:::TransformPlugin,
         bevy_diagnostic:::DiagnosticsPlugin,
         bevy_input:::InputPlugin,
+        bevy_input_focus:::InputDispatchPlugin,
         #[custom(cfg(not(feature = "bevy_window")))]
         bevy_app:::ScheduleRunnerPlugin,
         #[cfg(feature = "bevy_window")]
diff --git a/examples/3d/mirror.rs b/examples/3d/mirror.rs
index 6451ccc2eb227..a204cfc8718f8 100644
--- a/examples/3d/mirror.rs
+++ b/examples/3d/mirror.rs
@@ -8,7 +8,6 @@ use bevy::{
     camera::RenderTarget,
     color::palettes::css::GREEN,
     input::mouse::AccumulatedMouseMotion,
-    input_focus::InputDispatchPlugin,
     math::{reflection_matrix, uvec2, vec3},
     pbr::{ExtendedMaterial, MaterialExtension},
     prelude::*,
@@ -122,7 +121,6 @@ fn main() {
                 ..default()
             }),
             UiWidgetsPlugins,
-            InputDispatchPlugin,
         ))
         .add_plugins(MaterialPlugin::<
             ExtendedMaterial<StandardMaterial, ScreenSpaceTextureExtension>,
diff --git a/examples/animation/animation_graph.rs b/examples/animation/animation_graph.rs
index 1ca032835decf..1a61da33110ef 100644
--- a/examples/animation/animation_graph.rs
+++ b/examples/animation/animation_graph.rs
@@ -8,7 +8,6 @@ use bevy::{
         basic::WHITE,
         css::{ANTIQUE_WHITE, DARK_GREEN},
     },
-    input_focus::InputDispatchPlugin,
     prelude::*,
     ui::{Pressed, RelativeCursorPosition},
     ui_widgets::{Button, UiWidgetsPlugins},
@@ -85,7 +84,6 @@ fn main() {
                 ..default()
             }),
             UiWidgetsPlugins,
-            InputDispatchPlugin,
         ))
         .add_systems(Startup, (setup_assets, setup_scene, setup_ui))
         .add_systems(Update, init_animations)
diff --git a/examples/animation/animation_masks.rs b/examples/animation/animation_masks.rs
index 7b75f7089e878..f85168bf3ebd0 100644
--- a/examples/animation/animation_masks.rs
+++ b/examples/animation/animation_masks.rs
@@ -110,7 +110,7 @@ fn main() {
             ..default()
         })
         .init_resource::<AppState>()
-        .add_observer(handle_button_toggles_on_press)
+        .add_observer(handle_button_toggles)
         .run();
 }
 
@@ -409,7 +409,7 @@ fn setup_animation_graph_once_loaded(
 
 // A system that handles requests from the user to toggle mask groups on and
 // off.
-fn handle_button_toggles_on_press(
+fn handle_button_toggles(
     press: On<Pointer<Click>>,
     mut animation_control_query: Query<(&mut AnimationControl)>,
     mut animation_players: Query<&AnimationGraphHandle, With<AnimationPlayer>>,
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index a906ccafbf0fd..b98929d31edbf 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -2,7 +2,7 @@
 //! change some settings or quit. There is no actual game, it will just display the current
 //! settings for 5 seconds before going back to the menu.
 
-use bevy::{input_focus::InputDispatchPlugin, prelude::*, ui_widgets::UiWidgetsPlugins};
+use bevy::{prelude::*, ui_widgets::UiWidgetsPlugins};
 
 const TEXT_COLOR: Color = Color::srgb(0.9, 0.9, 0.9);
 
@@ -32,7 +32,7 @@ struct Volume(u32);
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         // Insert as resource the initial value for the settings resources
         .insert_resource(DisplayQuality::Medium)
         .insert_resource(Volume(7))
diff --git a/examples/mobile/src/lib.rs b/examples/mobile/src/lib.rs
index 866b967fa547b..5492edebff070 100644
--- a/examples/mobile/src/lib.rs
+++ b/examples/mobile/src/lib.rs
@@ -3,7 +3,6 @@
 use bevy::{
     color::palettes::basic::*,
     input::{gestures::RotationGesture, touch::TouchPhase},
-    input_focus::InputDispatchPlugin,
     log::{Level, LogPlugin},
     picking::hover::Hovered,
     prelude::*,
@@ -46,7 +45,6 @@ pub fn main() {
                 ..default()
             }),
         UiWidgetsPlugins,
-        InputDispatchPlugin,
     ))
     // Make the winit loop wait more aggressively when no user input is received
     // This can help reduce cpu usage on mobile devices
diff --git a/examples/state/computed_states.rs b/examples/state/computed_states.rs
index fd32eac9c4717..708242bbb74b6 100644
--- a/examples/state/computed_states.rs
+++ b/examples/state/computed_states.rs
@@ -19,7 +19,6 @@
 use bevy::{
     dev_tools::states::*,
     input::keyboard::Key,
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
@@ -174,7 +173,7 @@ impl ComputedStates for Tutorial {
 fn main() {
     // We start the setup like we did in the states example.
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         .init_state::<AppState>()
         .init_state::<TutorialState>()
         // After initializing the normal states, we'll use `.add_computed_state::<CS>()` to initialize our `ComputedStates`
@@ -313,7 +312,6 @@ mod ui {
     use crate::*;
     use bevy::{
         color::palettes::css::*,
-        input_focus::InputDispatchPlugin,
         picking::hover::Hovered,
         prelude::*,
         ui::Pressed,
diff --git a/examples/state/custom_transitions.rs b/examples/state/custom_transitions.rs
index 27f3103998d39..a45d2f91a736b 100644
--- a/examples/state/custom_transitions.rs
+++ b/examples/state/custom_transitions.rs
@@ -16,7 +16,6 @@ use std::marker::PhantomData;
 use bevy::{
     dev_tools::states::*,
     ecs::schedule::ScheduleLabel,
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
@@ -38,7 +37,6 @@ fn main() {
         .add_plugins((
             DefaultPlugins,
             UiWidgetsPlugins,
-            InputDispatchPlugin,
             IdentityTransitionsPlugin::<AppState>::default(),
         ))
         .init_state::<AppState>()
diff --git a/examples/state/states.rs b/examples/state/states.rs
index c50beee09bdc7..5c14941bc30c9 100644
--- a/examples/state/states.rs
+++ b/examples/state/states.rs
@@ -6,7 +6,6 @@
 //! In this case, we're transitioning from a `Menu` state to an `InGame` state.
 
 use bevy::{
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
@@ -15,7 +14,7 @@ use bevy::{
 
 fn main() {
     let mut app = App::new();
-    app.add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+    app.add_plugins((DefaultPlugins, UiWidgetsPlugins))
         .init_state::<AppState>() // Alternatively we could use .insert_state(AppState::Menu)
         .add_systems(Startup, setup)
         // This system runs when we enter `AppState::Menu`, during the `StateTransition` schedule.
diff --git a/examples/state/sub_states.rs b/examples/state/sub_states.rs
index 6b18bf843154e..19702192fd984 100644
--- a/examples/state/sub_states.rs
+++ b/examples/state/sub_states.rs
@@ -9,7 +9,6 @@
 
 use bevy::{
     dev_tools::states::*,
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
@@ -41,7 +40,7 @@ enum IsPaused {
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         .init_state::<AppState>()
         .add_sub_state::<IsPaused>() // We set the substate up here.
         // Most of these remain the same
diff --git a/examples/ui/images/ui_texture_atlas_slice.rs b/examples/ui/images/ui_texture_atlas_slice.rs
index a52927e798860..a85a123f80c5d 100644
--- a/examples/ui/images/ui_texture_atlas_slice.rs
+++ b/examples/ui/images/ui_texture_atlas_slice.rs
@@ -3,7 +3,6 @@
 
 use bevy::{
     color::palettes::css::{GOLD, ORANGE},
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     reflect::Is,
@@ -13,7 +12,7 @@ use bevy::{
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         .add_systems(Startup, setup)
         .add_observer(button_on_interaction::<Add, Pressed>)
         .add_observer(button_on_interaction::<Remove, Pressed>)
diff --git a/examples/ui/images/ui_texture_slice.rs b/examples/ui/images/ui_texture_slice.rs
index 9d4dc82e6fa18..dddb2e885a2e1 100644
--- a/examples/ui/images/ui_texture_slice.rs
+++ b/examples/ui/images/ui_texture_slice.rs
@@ -3,7 +3,6 @@
 
 use bevy::{
     color::palettes::css::{GOLD, ORANGE},
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     reflect::Is,
@@ -13,7 +12,7 @@ use bevy::{
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         .add_systems(Startup, setup)
         .add_observer(button_on_interaction::<Add, Pressed>)
         .add_observer(button_on_interaction::<Remove, Pressed>)
diff --git a/examples/ui/layout/size_constraints.rs b/examples/ui/layout/size_constraints.rs
index 32132a2d21afd..09b3cecd24473 100644
--- a/examples/ui/layout/size_constraints.rs
+++ b/examples/ui/layout/size_constraints.rs
@@ -2,7 +2,6 @@
 
 use bevy::{
     color::palettes::css::*,
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
@@ -11,7 +10,7 @@ use bevy::{
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         .add_message::<ButtonActivated>()
         .add_systems(Startup, setup)
         .add_systems(Update, (update_buttons, update_radio_buttons_colors))
diff --git a/examples/ui/navigation/directional_navigation.rs b/examples/ui/navigation/directional_navigation.rs
index 5b6a96fd7b528..7994b629f8f4c 100644
--- a/examples/ui/navigation/directional_navigation.rs
+++ b/examples/ui/navigation/directional_navigation.rs
@@ -20,7 +20,7 @@ use bevy::{
     camera::NormalizedRenderTarget,
     input_focus::{
         directional_navigation::{AutoNavigationConfig, DirectionalNavigationPlugin},
-        InputDispatchPlugin, InputFocus, InputFocusVisible,
+        InputFocus, InputFocusVisible,
     },
     math::{CompassOctant, Dir2, Rot2},
     picking::{
@@ -37,7 +37,6 @@ fn main() {
         // Input focus is not enabled by default, so we need to add the corresponding plugins
         .add_plugins((
             DefaultPlugins,
-            InputDispatchPlugin,
             DirectionalNavigationPlugin,
         ))
         // This resource is canonically used to track whether or not to render a focus indicator
diff --git a/examples/ui/navigation/directional_navigation_overrides.rs b/examples/ui/navigation/directional_navigation_overrides.rs
index 75a7f601ec4ca..ed5ac605dbc57 100644
--- a/examples/ui/navigation/directional_navigation_overrides.rs
+++ b/examples/ui/navigation/directional_navigation_overrides.rs
@@ -25,7 +25,7 @@ use bevy::{
         directional_navigation::{
             AutoNavigationConfig, DirectionalNavigationMap, DirectionalNavigationPlugin,
         },
-        InputDispatchPlugin, InputFocus, InputFocusVisible,
+        InputFocus, InputFocusVisible,
     },
     math::{CompassOctant, Dir2},
     picking::{
@@ -41,11 +41,7 @@ fn main() {
     App::new()
         // Input focus is not enabled by default, so we need to add the corresponding plugins
         // The navigation system's resources are initialized by the DirectionalNavigationPlugin.
-        .add_plugins((
-            DefaultPlugins,
-            InputDispatchPlugin,
-            DirectionalNavigationPlugin,
-        ))
+        .add_plugins((DefaultPlugins, DirectionalNavigationPlugin))
         // This resource is canonically used to track whether or not to render a focus indicator
         // It starts as false, but we set it to true here as we would like to see the focus indicator
         .insert_resource(InputFocusVisible(true))
diff --git a/examples/ui/scroll_and_overflow/overflow.rs b/examples/ui/scroll_and_overflow/overflow.rs
index e3147805cbd23..d5cc1fafd882b 100644
--- a/examples/ui/scroll_and_overflow/overflow.rs
+++ b/examples/ui/scroll_and_overflow/overflow.rs
@@ -2,7 +2,6 @@
 
 use bevy::{
     color::palettes::css::*,
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     reflect::Is,
@@ -12,7 +11,7 @@ use bevy::{
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         .add_systems(Startup, setup)
         .add_observer(update_outlines_on_interaction::<Add, Pressed>)
         .add_observer(update_outlines_on_interaction::<Remove, Pressed>)
diff --git a/examples/ui/scroll_and_overflow/scrollbars.rs b/examples/ui/scroll_and_overflow/scrollbars.rs
index a3b1a754c32a3..fb9600b6b2995 100644
--- a/examples/ui/scroll_and_overflow/scrollbars.rs
+++ b/examples/ui/scroll_and_overflow/scrollbars.rs
@@ -2,10 +2,7 @@
 
 use bevy::{
     ecs::{relationship::RelatedSpawner, spawn::SpawnWith},
-    input_focus::{
-        tab_navigation::{TabGroup, TabNavigationPlugin},
-        InputDispatchPlugin,
-    },
+    input_focus::tab_navigation::{TabGroup, TabNavigationPlugin},
     picking::hover::Hovered,
     prelude::*,
     ui_widgets::{
@@ -18,7 +15,6 @@ fn main() {
         .add_plugins((
             DefaultPlugins,
             ScrollbarPlugin,
-            InputDispatchPlugin,
             TabNavigationPlugin,
         ))
         .insert_resource(UiScale(1.25))
diff --git a/examples/ui/styling/box_shadow.rs b/examples/ui/styling/box_shadow.rs
index 3de28fd31bedf..f9533b2adb73f 100644
--- a/examples/ui/styling/box_shadow.rs
+++ b/examples/ui/styling/box_shadow.rs
@@ -2,7 +2,6 @@
 
 use bevy::{
     color::palettes::css::*,
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     reflect::Is,
@@ -126,7 +125,7 @@ struct HeldButton {
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         .insert_resource(SHADOW_DEFAULT_SETTINGS)
         .insert_resource(SHAPE_DEFAULT_SETTINGS)
         .insert_resource(HeldButton::default())
diff --git a/examples/ui/ui_transform.rs b/examples/ui/ui_transform.rs
index a341ff60969a6..c64ce9a435649 100644
--- a/examples/ui/ui_transform.rs
+++ b/examples/ui/ui_transform.rs
@@ -3,7 +3,6 @@ use bevy::color::palettes::css::DARK_GRAY;
 use bevy::color::palettes::css::RED;
 use bevy::color::palettes::css::YELLOW;
 use bevy::{
-    input_focus::InputDispatchPlugin,
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
@@ -13,7 +12,7 @@ use core::f32::consts::FRAC_PI_8;
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         .add_systems(Startup, setup)
         .add_systems(Update, button_system)
         .add_systems(Update, translation_system)
diff --git a/examples/ui/widgets/button.rs b/examples/ui/widgets/button.rs
index 936065c3e08fe..637bb46e38eba 100644
--- a/examples/ui/widgets/button.rs
+++ b/examples/ui/widgets/button.rs
@@ -3,7 +3,7 @@
 
 use bevy::{
     color::palettes::basic::*,
-    input_focus::{InputDispatchPlugin, InputFocus},
+    input_focus::InputFocus,
     picking::hover::Hovered,
     prelude::*,
     reflect::Is,
@@ -13,7 +13,7 @@ use bevy::{
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, InputDispatchPlugin))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
         // `InputFocus` must be set for accessibility to recognize the button.
         .init_resource::<InputFocus>()
         .add_systems(Startup, setup)
diff --git a/examples/ui/widgets/standard_widgets.rs b/examples/ui/widgets/standard_widgets.rs
index c2099367a40fd..c63b2809a1308 100644
--- a/examples/ui/widgets/standard_widgets.rs
+++ b/examples/ui/widgets/standard_widgets.rs
@@ -10,7 +10,7 @@ use bevy::{
     color::palettes::basic::*,
     input_focus::{
         tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
-        InputDispatchPlugin, InputFocus,
+        InputFocus,
     },
     picking::hover::Hovered,
     prelude::*,
@@ -29,7 +29,6 @@ fn main() {
         .add_plugins((
             DefaultPlugins,
             UiWidgetsPlugins,
-            InputDispatchPlugin,
             TabNavigationPlugin,
         ))
         .insert_resource(DemoWidgetStates {
diff --git a/examples/ui/widgets/standard_widgets_observers.rs b/examples/ui/widgets/standard_widgets_observers.rs
index c5a24f1833f71..cc13366a36269 100644
--- a/examples/ui/widgets/standard_widgets_observers.rs
+++ b/examples/ui/widgets/standard_widgets_observers.rs
@@ -6,10 +6,7 @@
 
 use bevy::{
     color::palettes::basic::*,
-    input_focus::{
-        tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
-        InputDispatchPlugin,
-    },
+    input_focus::tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
     picking::hover::Hovered,
     prelude::*,
     reflect::Is,
@@ -25,7 +22,6 @@ fn main() {
         .add_plugins((
             DefaultPlugins,
             UiWidgetsPlugins,
-            InputDispatchPlugin,
             TabNavigationPlugin,
         ))
         .insert_resource(DemoWidgetStates { slider_value: 50.0 })
diff --git a/examples/ui/widgets/tab_navigation.rs b/examples/ui/widgets/tab_navigation.rs
index 35e8cdbb94a6c..0b801f43c1563 100644
--- a/examples/ui/widgets/tab_navigation.rs
+++ b/examples/ui/widgets/tab_navigation.rs
@@ -4,7 +4,7 @@ use bevy::{
     color::palettes::basic::*,
     input_focus::{
         tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
-        InputDispatchPlugin, InputFocus,
+        InputFocus,
     },
     picking::hover::Hovered,
     prelude::*,
@@ -15,10 +15,7 @@ use bevy::{
 
 fn main() {
     App::new()
-        .add_plugins((
-            DefaultPlugins, UiWidgetsPlugins,
-            InputDispatchPlugin, TabNavigationPlugin,
-        ))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, TabNavigationPlugin))
         .add_systems(Startup, setup)
         .add_systems(Update, focus_system)
         .add_observer(button_on_interaction::<Add, Pressed>)
diff --git a/examples/ui/widgets/vertical_slider.rs b/examples/ui/widgets/vertical_slider.rs
index 2f44193c046a8..8fe2b68a02c23 100644
--- a/examples/ui/widgets/vertical_slider.rs
+++ b/examples/ui/widgets/vertical_slider.rs
@@ -1,10 +1,7 @@
 //! Simple example showing vertical and horizontal slider widgets with snap behavior and value labels
 
 use bevy::{
-    input_focus::{
-        tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
-        InputDispatchPlugin,
-    },
+    input_focus::tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
     picking::hover::Hovered,
     prelude::*,
     ui_widgets::{
@@ -21,7 +18,6 @@ fn main() {
         .add_plugins((
             DefaultPlugins,
             UiWidgetsPlugins,
-            InputDispatchPlugin,
             TabNavigationPlugin,
         ))
         .add_systems(Startup, setup)
diff --git a/examples/usage/cooldown.rs b/examples/usage/cooldown.rs
index c5cfc58c64bc6..b97b41509eac1 100644
--- a/examples/usage/cooldown.rs
+++ b/examples/usage/cooldown.rs
@@ -13,7 +13,7 @@ fn main() {
             Update,
             animate_cooldowns.run_if(any_with_component::<ActiveCooldown>),
         )
-        .add_observer(activate_ability_on_press)
+        .add_observer(activate_ability)
         .run();
 }
 
@@ -124,7 +124,7 @@ struct Cooldown(Timer);
 #[component(storage = "SparseSet")]
 struct ActiveCooldown;
 
-fn activate_ability_on_press(
+fn activate_ability(
     press: On<Pointer<Click>>,
     mut commands: Commands,
     mut button_query: Query<

From ab49ae97ed2e286d3ec5429d18a84b1b400a1710 Mon Sep 17 00:00:00 2001
From: Luke Yoo <w.lukeyoo@gmail.com>
Date: Mon, 9 Mar 2026 17:35:00 -0700
Subject: [PATCH 3/8] Include `UiWidgetsButtonPlugin` in `DefaultPlugins`

---
 crates/bevy_internal/src/default_plugins.rs   |  2 ++
 crates/bevy_ui_widgets/src/button.rs          |  5 +--
 crates/bevy_ui_widgets/src/lib.rs             |  3 +-
 examples/3d/mirror.rs                         | 14 +++-----
 examples/3d/pcss.rs                           |  2 +-
 examples/animation/animation_graph.rs         | 15 ++++-----
 examples/games/game_menu.rs                   |  4 +--
 examples/mobile/src/lib.rs                    |  7 ++--
 examples/state/computed_states.rs             |  6 ++--
 examples/state/custom_transitions.rs          |  3 +-
 examples/state/states.rs                      |  4 +--
 examples/state/sub_states.rs                  |  4 +--
 examples/ui/images/ui_texture_atlas_slice.rs  |  4 +--
 examples/ui/images/ui_texture_slice.rs        |  4 +--
 examples/ui/layout/size_constraints.rs        |  4 +--
 .../ui/navigation/directional_navigation.rs   |  5 +--
 examples/ui/scroll_and_overflow/overflow.rs   |  9 ++----
 examples/ui/scroll_and_overflow/scrollbars.rs |  6 +---
 examples/ui/styling/box_shadow.rs             |  4 +--
 examples/ui/ui_transform.rs                   | 32 ++++++++-----------
 examples/ui/widgets/button.rs                 |  4 +--
 examples/ui/widgets/standard_widgets.rs       |  6 +---
 .../ui/widgets/standard_widgets_observers.rs  |  6 +---
 examples/ui/widgets/tab_navigation.rs         |  4 +--
 examples/ui/widgets/vertical_slider.rs        |  6 +---
 examples/usage/cooldown.rs                    |  3 +-
 26 files changed, 68 insertions(+), 98 deletions(-)

diff --git a/crates/bevy_internal/src/default_plugins.rs b/crates/bevy_internal/src/default_plugins.rs
index ffaabea889787..1b2ab9cdc481a 100644
--- a/crates/bevy_internal/src/default_plugins.rs
+++ b/crates/bevy_internal/src/default_plugins.rs
@@ -66,6 +66,8 @@ plugin_group! {
         bevy_ui:::UiPlugin,
         #[cfg(feature = "bevy_ui_render")]
         bevy_ui_render:::UiRenderPlugin,
+        #[cfg(feature = "bevy_ui_widgets")]
+        bevy_ui_widgets:::UiWidgetsButtonPlugin,
         #[cfg(feature = "bevy_gltf")]
         bevy_gltf:::GltfPlugin,
         #[cfg(feature = "bevy_pbr")]
diff --git a/crates/bevy_ui_widgets/src/button.rs b/crates/bevy_ui_widgets/src/button.rs
index 4c98f6063d8d6..2484cfa170946 100644
--- a/crates/bevy_ui_widgets/src/button.rs
+++ b/crates/bevy_ui_widgets/src/button.rs
@@ -113,9 +113,10 @@ fn button_on_pointer_cancel(
 }
 
 /// Plugin that adds the observers for the [`Button`] widget.
-pub struct ButtonPlugin;
+#[derive(Default)]
+pub struct UiWidgetsButtonPlugin;
 
-impl Plugin for ButtonPlugin {
+impl Plugin for UiWidgetsButtonPlugin {
     fn build(&self, app: &mut App) {
         app.add_observer(button_on_key_event)
             .add_observer(button_on_pointer_down)
diff --git a/crates/bevy_ui_widgets/src/lib.rs b/crates/bevy_ui_widgets/src/lib.rs
index 8f30e2842701a..8a27547bfe660 100644
--- a/crates/bevy_ui_widgets/src/lib.rs
+++ b/crates/bevy_ui_widgets/src/lib.rs
@@ -42,13 +42,14 @@ use crate::popover::PopoverPlugin;
 
 /// A plugin group that registers the observers for all of the widgets in this crate. If you don't want to
 /// use all of the widgets, you can import the individual widget plugins instead.
+/// [`button::UiWidgetsButtonPlugin`] is part of [`DefaultPlugins`].
+#[derive(Default)]
 pub struct UiWidgetsPlugins;
 
 impl PluginGroup for UiWidgetsPlugins {
     fn build(self) -> PluginGroupBuilder {
         PluginGroupBuilder::start::<Self>()
             .add(PopoverPlugin)
-            .add(ButtonPlugin)
             .add(CheckboxPlugin)
             .add(MenuPlugin)
             .add(RadioGroupPlugin)
diff --git a/examples/3d/mirror.rs b/examples/3d/mirror.rs
index a204cfc8718f8..c631caaf97dcf 100644
--- a/examples/3d/mirror.rs
+++ b/examples/3d/mirror.rs
@@ -16,7 +16,6 @@ use bevy::{
     },
     shader::ShaderRef,
     ui::Pressed,
-    ui_widgets::UiWidgetsPlugins,
     window::{PrimaryWindow, WindowResized},
 };
 
@@ -112,16 +111,13 @@ static FOX_ASSET_PATH: &str = "models/animated/Fox.glb";
 /// The app entry point.
 fn main() {
     App::new()
-        .add_plugins((
-            DefaultPlugins.set(WindowPlugin {
-                primary_window: Some(Window {
-                    title: "Bevy Mirror Example".into(),
-                    ..default()
-                }),
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                title: "Bevy Mirror Example".into(),
                 ..default()
             }),
-            UiWidgetsPlugins,
-        ))
+            ..default()
+        }))
         .add_plugins(MaterialPlugin::<
             ExtendedMaterial<StandardMaterial, ScreenSpaceTextureExtension>,
         >::default())
diff --git a/examples/3d/pcss.rs b/examples/3d/pcss.rs
index 22a99ac4917e2..8de2202893027 100644
--- a/examples/3d/pcss.rs
+++ b/examples/3d/pcss.rs
@@ -139,7 +139,7 @@ fn main() {
                 handle_light_type_change,
                 handle_shadow_filter_change,
                 handle_pcss_toggle,
-            )
+            ),
         )
         .add_observer(widgets::handle_ui_button_interaction_on_click::<AppSetting>)
         .run();
diff --git a/examples/animation/animation_graph.rs b/examples/animation/animation_graph.rs
index 1a61da33110ef..cc3347bd1f8a6 100644
--- a/examples/animation/animation_graph.rs
+++ b/examples/animation/animation_graph.rs
@@ -10,7 +10,7 @@ use bevy::{
     },
     prelude::*,
     ui::{Pressed, RelativeCursorPosition},
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 use argh::FromArgs;
@@ -75,16 +75,13 @@ fn main() {
     let args = Args::from_args(&[], &[]).unwrap();
 
     App::new()
-        .add_plugins((
-            DefaultPlugins.set(WindowPlugin {
-                primary_window: Some(Window {
-                    title: "Bevy Animation Graph Example".into(),
-                    ..default()
-                }),
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                title: "Bevy Animation Graph Example".into(),
                 ..default()
             }),
-            UiWidgetsPlugins,
-        ))
+            ..default()
+        }))
         .add_systems(Startup, (setup_assets, setup_scene, setup_ui))
         .add_systems(Update, init_animations)
         .add_systems(
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index b98929d31edbf..a625525c11570 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -2,7 +2,7 @@
 //! change some settings or quit. There is no actual game, it will just display the current
 //! settings for 5 seconds before going back to the menu.
 
-use bevy::{prelude::*, ui_widgets::UiWidgetsPlugins};
+use bevy::prelude::*;
 
 const TEXT_COLOR: Color = Color::srgb(0.9, 0.9, 0.9);
 
@@ -32,7 +32,7 @@ struct Volume(u32);
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         // Insert as resource the initial value for the settings resources
         .insert_resource(DisplayQuality::Medium)
         .insert_resource(Volume(7))
diff --git a/examples/mobile/src/lib.rs b/examples/mobile/src/lib.rs
index 5492edebff070..07e63865113ae 100644
--- a/examples/mobile/src/lib.rs
+++ b/examples/mobile/src/lib.rs
@@ -8,7 +8,7 @@ use bevy::{
     prelude::*,
     reflect::Is,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
     window::{AppLifecycle, ScreenEdge, WindowMode},
     winit::WinitSettings,
 };
@@ -19,7 +19,7 @@ use bevy::{
 /// `main.rs`.
 pub fn main() {
     let mut app = App::new();
-    app.add_plugins((
+    app.add_plugins(
         DefaultPlugins
             .set(LogPlugin {
                 // This will show some log events from Bevy to the native logger.
@@ -44,8 +44,7 @@ pub fn main() {
                 }),
                 ..default()
             }),
-        UiWidgetsPlugins,
-    ))
+    )
     // Make the winit loop wait more aggressively when no user input is received
     // This can help reduce cpu usage on mobile devices
     .insert_resource(WinitSettings::mobile())
diff --git a/examples/state/computed_states.rs b/examples/state/computed_states.rs
index 708242bbb74b6..33b73fc50861f 100644
--- a/examples/state/computed_states.rs
+++ b/examples/state/computed_states.rs
@@ -22,7 +22,7 @@ use bevy::{
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 use ui::*;
 
@@ -173,7 +173,7 @@ impl ComputedStates for Tutorial {
 fn main() {
     // We start the setup like we did in the states example.
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         .init_state::<AppState>()
         .init_state::<TutorialState>()
         // After initializing the normal states, we'll use `.add_computed_state::<CS>()` to initialize our `ComputedStates`
@@ -315,7 +315,7 @@ mod ui {
         picking::hover::Hovered,
         prelude::*,
         ui::Pressed,
-        ui_widgets::{Button, UiWidgetsPlugins},
+        ui_widgets::Button,
     };
 
     #[derive(Resource)]
diff --git a/examples/state/custom_transitions.rs b/examples/state/custom_transitions.rs
index a45d2f91a736b..e1d3d1aaf2f1d 100644
--- a/examples/state/custom_transitions.rs
+++ b/examples/state/custom_transitions.rs
@@ -19,7 +19,7 @@ use bevy::{
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 use custom_transitions::*;
@@ -36,7 +36,6 @@ fn main() {
         // We insert the custom transitions plugin for `AppState`.
         .add_plugins((
             DefaultPlugins,
-            UiWidgetsPlugins,
             IdentityTransitionsPlugin::<AppState>::default(),
         ))
         .init_state::<AppState>()
diff --git a/examples/state/states.rs b/examples/state/states.rs
index 5c14941bc30c9..87663c768dd47 100644
--- a/examples/state/states.rs
+++ b/examples/state/states.rs
@@ -9,12 +9,12 @@ use bevy::{
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 fn main() {
     let mut app = App::new();
-    app.add_plugins((DefaultPlugins, UiWidgetsPlugins))
+    app.add_plugins(DefaultPlugins)
         .init_state::<AppState>() // Alternatively we could use .insert_state(AppState::Menu)
         .add_systems(Startup, setup)
         // This system runs when we enter `AppState::Menu`, during the `StateTransition` schedule.
diff --git a/examples/state/sub_states.rs b/examples/state/sub_states.rs
index 19702192fd984..071d880e748a2 100644
--- a/examples/state/sub_states.rs
+++ b/examples/state/sub_states.rs
@@ -12,7 +12,7 @@ use bevy::{
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 use ui::*;
@@ -40,7 +40,7 @@ enum IsPaused {
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         .init_state::<AppState>()
         .add_sub_state::<IsPaused>() // We set the substate up here.
         // Most of these remain the same
diff --git a/examples/ui/images/ui_texture_atlas_slice.rs b/examples/ui/images/ui_texture_atlas_slice.rs
index a85a123f80c5d..d9aa08e0cfcb3 100644
--- a/examples/ui/images/ui_texture_atlas_slice.rs
+++ b/examples/ui/images/ui_texture_atlas_slice.rs
@@ -7,12 +7,12 @@ use bevy::{
     prelude::*,
     reflect::Is,
     ui::{widget::NodeImageMode, Pressed},
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
         .add_observer(button_on_interaction::<Add, Pressed>)
         .add_observer(button_on_interaction::<Remove, Pressed>)
diff --git a/examples/ui/images/ui_texture_slice.rs b/examples/ui/images/ui_texture_slice.rs
index dddb2e885a2e1..59752aeac1039 100644
--- a/examples/ui/images/ui_texture_slice.rs
+++ b/examples/ui/images/ui_texture_slice.rs
@@ -7,12 +7,12 @@ use bevy::{
     prelude::*,
     reflect::Is,
     ui::{widget::NodeImageMode, Pressed},
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
         .add_observer(button_on_interaction::<Add, Pressed>)
         .add_observer(button_on_interaction::<Remove, Pressed>)
diff --git a/examples/ui/layout/size_constraints.rs b/examples/ui/layout/size_constraints.rs
index 09b3cecd24473..666f45d098312 100644
--- a/examples/ui/layout/size_constraints.rs
+++ b/examples/ui/layout/size_constraints.rs
@@ -5,12 +5,12 @@ use bevy::{
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         .add_message::<ButtonActivated>()
         .add_systems(Startup, setup)
         .add_systems(Update, (update_buttons, update_radio_buttons_colors))
diff --git a/examples/ui/navigation/directional_navigation.rs b/examples/ui/navigation/directional_navigation.rs
index 7994b629f8f4c..1433829745643 100644
--- a/examples/ui/navigation/directional_navigation.rs
+++ b/examples/ui/navigation/directional_navigation.rs
@@ -35,10 +35,7 @@ use bevy::{
 fn main() {
     App::new()
         // Input focus is not enabled by default, so we need to add the corresponding plugins
-        .add_plugins((
-            DefaultPlugins,
-            DirectionalNavigationPlugin,
-        ))
+        .add_plugins((DefaultPlugins, DirectionalNavigationPlugin))
         // This resource is canonically used to track whether or not to render a focus indicator
         // It starts as false, but we set it to true here as we would like to see the focus indicator
         .insert_resource(InputFocusVisible(true))
diff --git a/examples/ui/scroll_and_overflow/overflow.rs b/examples/ui/scroll_and_overflow/overflow.rs
index d5cc1fafd882b..2e259806bc97b 100644
--- a/examples/ui/scroll_and_overflow/overflow.rs
+++ b/examples/ui/scroll_and_overflow/overflow.rs
@@ -6,12 +6,12 @@ use bevy::{
     prelude::*,
     reflect::Is,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
         .add_observer(update_outlines_on_interaction::<Add, Pressed>)
         .add_observer(update_outlines_on_interaction::<Remove, Pressed>)
@@ -106,10 +106,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
 fn update_outlines_on_interaction<E: EntityEvent, C: Component>(
     event: On<E, C>,
-    mut outline_query: Query<
-        (&Hovered, Has<Pressed>, &mut Outline),
-        With<Button>
-    >,
+    mut outline_query: Query<(&Hovered, Has<Pressed>, &mut Outline), With<Button>>,
 ) {
     if let Ok((hovered, pressed, mut outline)) = outline_query.get_mut(event.event_target()) {
         let hovered = hovered.get();
diff --git a/examples/ui/scroll_and_overflow/scrollbars.rs b/examples/ui/scroll_and_overflow/scrollbars.rs
index fb9600b6b2995..9bbeee00164e2 100644
--- a/examples/ui/scroll_and_overflow/scrollbars.rs
+++ b/examples/ui/scroll_and_overflow/scrollbars.rs
@@ -12,11 +12,7 @@ use bevy::{
 
 fn main() {
     App::new()
-        .add_plugins((
-            DefaultPlugins,
-            ScrollbarPlugin,
-            TabNavigationPlugin,
-        ))
+        .add_plugins((DefaultPlugins, ScrollbarPlugin, TabNavigationPlugin))
         .insert_resource(UiScale(1.25))
         .add_systems(Startup, setup_view_root)
         .add_systems(Update, update_scrollbar_thumb)
diff --git a/examples/ui/styling/box_shadow.rs b/examples/ui/styling/box_shadow.rs
index f9533b2adb73f..2ebe52efaa7ec 100644
--- a/examples/ui/styling/box_shadow.rs
+++ b/examples/ui/styling/box_shadow.rs
@@ -7,7 +7,7 @@ use bevy::{
     reflect::Is,
     time::Time,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
     window::RequestRedraw,
 };
 
@@ -125,7 +125,7 @@ struct HeldButton {
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         .insert_resource(SHADOW_DEFAULT_SETTINGS)
         .insert_resource(SHAPE_DEFAULT_SETTINGS)
         .insert_resource(HeldButton::default())
diff --git a/examples/ui/ui_transform.rs b/examples/ui/ui_transform.rs
index c64ce9a435649..285c463158bbe 100644
--- a/examples/ui/ui_transform.rs
+++ b/examples/ui/ui_transform.rs
@@ -6,13 +6,13 @@ use bevy::{
     picking::hover::Hovered,
     prelude::*,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 use core::f32::consts::FRAC_PI_8;
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
         .add_systems(Update, button_system)
         .add_systems(Update, translation_system)
@@ -31,6 +31,10 @@ pub struct RotateButton(pub Rot2);
 #[derive(Component)]
 pub struct ScaleButton(pub f32);
 
+#[derive(Component)]
+#[require(Button, Hovered)]
+struct HoverableButton;
+
 /// Marker component so the systems know which entities to translate, rotate and scale
 #[derive(Component)]
 pub struct TargetNode;
@@ -136,8 +140,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     GlobalZIndex(1),
                     children![
                         (
-                            Button,
-                            Hovered::default(),
+                            HoverableButton,
                             Node {
                                 height: px(50),
                                 width: px(50),
@@ -150,8 +153,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             children![(Text::new("<--"), TextColor(Color::BLACK),)]
                         ),
                         (
-                            Button,
-                            Hovered::default(),
+                            HoverableButton,
                             Node {
                                 height: px(50),
                                 width: px(50),
@@ -179,8 +181,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     TargetNode,
                     children![
                         (
-                            Button,
-                            Hovered::default(),
+                            HoverableButton,
                             Node {
                                 width: px(80),
                                 height: px(80),
@@ -200,8 +201,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             },
                             children![
                                 (
-                                    Button,
-                                    Hovered::default(),
+                                    HoverableButton,
                                     Node {
                                         width: px(80),
                                         height: px(80),
@@ -228,8 +228,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     }
                                 ),
                                 (
-                                    Button,
-                                    Hovered::default(),
+                                    HoverableButton,
                                     Node {
                                         width: px(80),
                                         height: px(80),
@@ -246,8 +245,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             ]
                         ),
                         (
-                            Button,
-                            Hovered::default(),
+                            HoverableButton,
                             Node {
                                 width: px(80),
                                 height: px(80),
@@ -275,8 +273,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     GlobalZIndex(1),
                     children![
                         (
-                            Button,
-                            Hovered::default(),
+                            HoverableButton,
                             Node {
                                 height: px(50),
                                 width: px(50),
@@ -289,8 +286,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             children![(Text::new("-->"), TextColor(Color::BLACK),)]
                         ),
                         (
-                            Button,
-                            Hovered::default(),
+                            HoverableButton,
                             Node {
                                 height: px(50),
                                 width: px(50),
diff --git a/examples/ui/widgets/button.rs b/examples/ui/widgets/button.rs
index 637bb46e38eba..64032cddb7881 100644
--- a/examples/ui/widgets/button.rs
+++ b/examples/ui/widgets/button.rs
@@ -8,12 +8,12 @@ use bevy::{
     prelude::*,
     reflect::Is,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins))
+        .add_plugins(DefaultPlugins)
         // `InputFocus` must be set for accessibility to recognize the button.
         .init_resource::<InputFocus>()
         .add_systems(Startup, setup)
diff --git a/examples/ui/widgets/standard_widgets.rs b/examples/ui/widgets/standard_widgets.rs
index c63b2809a1308..368f99eddaabc 100644
--- a/examples/ui/widgets/standard_widgets.rs
+++ b/examples/ui/widgets/standard_widgets.rs
@@ -26,11 +26,7 @@ use bevy::{
 
 fn main() {
     App::new()
-        .add_plugins((
-            DefaultPlugins,
-            UiWidgetsPlugins,
-            TabNavigationPlugin,
-        ))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, TabNavigationPlugin))
         .insert_resource(DemoWidgetStates {
             slider_value: 50.0,
             slider_click: TrackClick::Snap,
diff --git a/examples/ui/widgets/standard_widgets_observers.rs b/examples/ui/widgets/standard_widgets_observers.rs
index cc13366a36269..b6e15cfbc98de 100644
--- a/examples/ui/widgets/standard_widgets_observers.rs
+++ b/examples/ui/widgets/standard_widgets_observers.rs
@@ -19,11 +19,7 @@ use bevy::{
 
 fn main() {
     App::new()
-        .add_plugins((
-            DefaultPlugins,
-            UiWidgetsPlugins,
-            TabNavigationPlugin,
-        ))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, TabNavigationPlugin))
         .insert_resource(DemoWidgetStates { slider_value: 50.0 })
         .add_systems(Startup, setup)
         .add_observer(button_on_interaction::<Add, Pressed>)
diff --git a/examples/ui/widgets/tab_navigation.rs b/examples/ui/widgets/tab_navigation.rs
index 0b801f43c1563..d49dec4ff89a9 100644
--- a/examples/ui/widgets/tab_navigation.rs
+++ b/examples/ui/widgets/tab_navigation.rs
@@ -10,12 +10,12 @@ use bevy::{
     prelude::*,
     reflect::Is,
     ui::Pressed,
-    ui_widgets::{Button, UiWidgetsPlugins},
+    ui_widgets::Button,
 };
 
 fn main() {
     App::new()
-        .add_plugins((DefaultPlugins, UiWidgetsPlugins, TabNavigationPlugin))
+        .add_plugins((DefaultPlugins, TabNavigationPlugin))
         .add_systems(Startup, setup)
         .add_systems(Update, focus_system)
         .add_observer(button_on_interaction::<Add, Pressed>)
diff --git a/examples/ui/widgets/vertical_slider.rs b/examples/ui/widgets/vertical_slider.rs
index 8fe2b68a02c23..857f08c6a963b 100644
--- a/examples/ui/widgets/vertical_slider.rs
+++ b/examples/ui/widgets/vertical_slider.rs
@@ -15,11 +15,7 @@ const SLIDER_THUMB: Color = Color::srgb(0.35, 0.75, 0.35);
 
 fn main() {
     App::new()
-        .add_plugins((
-            DefaultPlugins,
-            UiWidgetsPlugins,
-            TabNavigationPlugin,
-        ))
+        .add_plugins((DefaultPlugins, UiWidgetsPlugins, TabNavigationPlugin))
         .add_systems(Startup, setup)
         .add_systems(Update, (update_slider_visuals, update_value_labels))
         .run();
diff --git a/examples/usage/cooldown.rs b/examples/usage/cooldown.rs
index b97b41509eac1..0452650fdc6eb 100644
--- a/examples/usage/cooldown.rs
+++ b/examples/usage/cooldown.rs
@@ -149,7 +149,8 @@ fn activate_ability(
         **text = format!(
             "You can eat {name} again in {} seconds.",
             cooldown.0.remaining_secs().ceil()
-        ).into();
+        )
+        .into();
     }
 }
 

From 84daf34e1604adbf578518ee582e22fa36d6f8fb Mon Sep 17 00:00:00 2001
From: Luke Yoo <w.lukeyoo@gmail.com>
Date: Mon, 9 Mar 2026 20:57:37 -0700
Subject: [PATCH 4/8] bevy_ui_widgets enables `InputDispatchPlugin` in
 `DefaultPlugins`

---
 Cargo.toml                                  | 2 +-
 crates/bevy_internal/src/default_plugins.rs | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/Cargo.toml b/Cargo.toml
index 4dc83dcc41e12..30d5f04fa12ab 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -405,7 +405,7 @@ bevy_log = ["bevy_internal/bevy_log"]
 bevy_input_focus = ["bevy_internal/bevy_input_focus"]
 
 # Headless widget collection for Bevy UI.
-bevy_ui_widgets = ["bevy_internal/bevy_ui_widgets"]
+bevy_ui_widgets = ["bevy_internal/bevy_ui_widgets", "bevy_input_focus"]
 
 # Feathers widget collection.
 experimental_bevy_feathers = ["bevy_internal/bevy_feathers", "bevy_ui_widgets"]
diff --git a/crates/bevy_internal/src/default_plugins.rs b/crates/bevy_internal/src/default_plugins.rs
index 1b2ab9cdc481a..6421b93d46c1a 100644
--- a/crates/bevy_internal/src/default_plugins.rs
+++ b/crates/bevy_internal/src/default_plugins.rs
@@ -12,6 +12,7 @@ plugin_group! {
         bevy_transform:::TransformPlugin,
         bevy_diagnostic:::DiagnosticsPlugin,
         bevy_input:::InputPlugin,
+        #[cfg(feature = "bevy_input_focus")]
         bevy_input_focus:::InputDispatchPlugin,
         #[custom(cfg(not(feature = "bevy_window")))]
         bevy_app:::ScheduleRunnerPlugin,

From eed3fa09ced36393bc5db5e39132d2761097ba6e Mon Sep 17 00:00:00 2001
From: Luke Yoo <w.lukeyoo@gmail.com>
Date: Mon, 9 Mar 2026 21:11:08 -0700
Subject: [PATCH 5/8] Remove `Hovered` from examples/mobile/src/lib.rs

---
 examples/mobile/src/lib.rs | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/examples/mobile/src/lib.rs b/examples/mobile/src/lib.rs
index 07e63865113ae..e1253838b0620 100644
--- a/examples/mobile/src/lib.rs
+++ b/examples/mobile/src/lib.rs
@@ -4,7 +4,6 @@ use bevy::{
     color::palettes::basic::*,
     input::{gestures::RotationGesture, touch::TouchPhase},
     log::{Level, LogPlugin},
-    picking::hover::Hovered,
     prelude::*,
     reflect::Is,
     ui::Pressed,
@@ -60,7 +59,6 @@ pub fn main() {
     )
     .add_observer(button_on_interaction::<Add, Pressed>)
     .add_observer(button_on_interaction::<Remove, Pressed>)
-    .add_observer(button_on_interaction::<Insert, Hovered>)
     .run();
 }
 
@@ -147,7 +145,6 @@ fn setup_scene(
     commands
         .spawn((
             Button,
-            Hovered::default(),
             Node {
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
@@ -171,14 +168,13 @@ fn setup_scene(
 
 fn button_on_interaction<E: EntityEvent, C: Component>(
     event: On<E, C>,
-    mut button_query: Query<(&Hovered, Has<Pressed>, &mut BackgroundColor), With<Button>>,
+    mut button_query: Query<(Has<Pressed>, &mut BackgroundColor), With<Button>>,
 ) {
-    if let Ok((hovered, pressed, mut color)) = button_query.get_mut(event.event_target()) {
+    if let Ok((pressed, mut color)) = button_query.get_mut(event.event_target()) {
         let pressed = pressed && !(E::is::<Remove>() && C::is::<Pressed>());
-        *color = match (hovered.get(), pressed) {
-            (true, true) => BLUE.into(),
-            (true, false) => GRAY.into(),
-            (false, _) => WHITE.into(),
+        *color = match pressed {
+            true => BLUE.into(),
+            false => WHITE.into(),
         }
     }
 }

From 8acd6f5d622b22c936b9f552efbe05fea784d182 Mon Sep 17 00:00:00 2001
From: Luke Yoo <w.lukeyoo@gmail.com>
Date: Tue, 10 Mar 2026 12:49:39 -0700
Subject: [PATCH 6/8] Let `FeathersPlugin` load `InputDispatchPlugin`

---
 crates/bevy_internal/src/default_plugins.rs | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/crates/bevy_internal/src/default_plugins.rs b/crates/bevy_internal/src/default_plugins.rs
index 6421b93d46c1a..d4e1b6789823b 100644
--- a/crates/bevy_internal/src/default_plugins.rs
+++ b/crates/bevy_internal/src/default_plugins.rs
@@ -12,7 +12,9 @@ plugin_group! {
         bevy_transform:::TransformPlugin,
         bevy_diagnostic:::DiagnosticsPlugin,
         bevy_input:::InputPlugin,
-        #[cfg(feature = "bevy_input_focus")]
+        // NOTE: Assuming FeathersPlugin is added when "bevy_feathers" is enabled,
+        // This is not included due to the redundancy.
+        #[custom(cfg(all(feature = "bevy_input_focus", not(feature = "bevy_feathers"))))]
         bevy_input_focus:::InputDispatchPlugin,
         #[custom(cfg(not(feature = "bevy_window")))]
         bevy_app:::ScheduleRunnerPlugin,
@@ -67,7 +69,7 @@ plugin_group! {
         bevy_ui:::UiPlugin,
         #[cfg(feature = "bevy_ui_render")]
         bevy_ui_render:::UiRenderPlugin,
-        #[cfg(feature = "bevy_ui_widgets")]
+        #[custom(cfg(any(feature = "bevy_ui_widgets", feature = "bevy_feathers")))]
         bevy_ui_widgets:::UiWidgetsButtonPlugin,
         #[cfg(feature = "bevy_gltf")]
         bevy_gltf:::GltfPlugin,

From f5445100bc679094a90a8d395b8f7f2d67741ab5 Mon Sep 17 00:00:00 2001
From: Luke Yoo <w.lukeyoo@gmail.com>
Date: Tue, 10 Mar 2026 14:01:56 -0700
Subject: [PATCH 7/8] Drop a comment where we add `Hovered` in examples

---
 examples/3d/clustered_decals.rs                |  1 +
 examples/3d/light_textures.rs                  |  1 +
 examples/games/game_menu.rs                    |  1 +
 examples/state/custom_transitions.rs           |  1 +
 examples/state/states.rs                       |  1 +
 examples/state/sub_states.rs                   |  1 +
 examples/stress_tests/many_buttons.rs          |  1 +
 examples/ui/images/ui_texture_atlas_slice.rs   |  1 +
 examples/ui/images/ui_texture_slice.rs         |  1 +
 examples/ui/layout/display_and_visibility.rs   |  1 +
 examples/ui/layout/size_constraints.rs         |  1 +
 examples/ui/scroll_and_overflow/overflow.rs    |  1 +
 examples/ui/scroll_and_overflow/scrollbars.rs  |  2 ++
 examples/ui/styling/box_shadow.rs              | 14 ++++++++------
 examples/ui/ui_transform.rs                    |  1 +
 examples/ui/widgets/button.rs                  |  1 +
 examples/ui/widgets/standard_widgets.rs        | 18 +++++++++++-------
 .../ui/widgets/standard_widgets_observers.rs   |  3 +++
 examples/ui/widgets/tab_navigation.rs          |  1 +
 examples/ui/widgets/vertical_slider.rs         |  2 ++
 20 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/examples/3d/clustered_decals.rs b/examples/3d/clustered_decals.rs
index da17284a9dcaf..c159f078e8502 100644
--- a/examples/3d/clustered_decals.rs
+++ b/examples/3d/clustered_decals.rs
@@ -292,6 +292,7 @@ fn drag_button(label: &str) -> impl Bundle {
         },
         Button,
         BackgroundColor(Color::BLACK),
+        // Detect the hover.
         Hovered::default(),
         BUTTON_BORDER_COLOR,
         children![widgets::ui_text(label, Color::WHITE)],
diff --git a/examples/3d/light_textures.rs b/examples/3d/light_textures.rs
index 510959672d598..fc9e9f841e168 100644
--- a/examples/3d/light_textures.rs
+++ b/examples/3d/light_textures.rs
@@ -337,6 +337,7 @@ fn drag_button(label: &str) -> impl Bundle {
         },
         Button,
         BackgroundColor(Color::BLACK),
+        // Detect the hover.
         Hovered::default(),
         BUTTON_BORDER_COLOR,
         children![widgets::ui_text(label, Color::WHITE),],
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index a625525c11570..01744d4a57639 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -309,6 +309,7 @@ mod menu {
     const PRESSED_BUTTON: Color = Color::srgb(0.25, 0.65, 0.25);
     const SELECTED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
 
+    // Tag component that detects the hover
     #[derive(Component)]
     #[require(Button, Hovered)]
     struct HoverableButton;
diff --git a/examples/state/custom_transitions.rs b/examples/state/custom_transitions.rs
index e1d3d1aaf2f1d..23447e7abc8f4 100644
--- a/examples/state/custom_transitions.rs
+++ b/examples/state/custom_transitions.rs
@@ -257,6 +257,7 @@ fn setup_menu(mut commands: Commands) {
             },
             children![(
                 Button,
+                // hover detection
                 Hovered::default(),
                 Node {
                     width: px(150),
diff --git a/examples/state/states.rs b/examples/state/states.rs
index 87663c768dd47..37162d2fee29b 100644
--- a/examples/state/states.rs
+++ b/examples/state/states.rs
@@ -72,6 +72,7 @@ fn setup_menu(mut commands: Commands) {
             },
             children![(
                 Button,
+                // hover detection
                 Hovered::default(),
                 Node {
                     width: px(150),
diff --git a/examples/state/sub_states.rs b/examples/state/sub_states.rs
index 071d880e748a2..f1717d71b5bf0 100644
--- a/examples/state/sub_states.rs
+++ b/examples/state/sub_states.rs
@@ -169,6 +169,7 @@ mod ui {
                 },
                 children![(
                     Button,
+                    // hover detection
                     Hovered::default(),
                     Node {
                         width: px(150),
diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index bf44d15159321..b48dc98bb75e5 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -278,6 +278,7 @@ fn spawn_button(
     let margin = UiRect::axes(width * 0.05, height * 0.05);
     let mut builder = commands.spawn((
         Button,
+        // This is to detect the hover
         Hovered::default(),
         Node {
             width,
diff --git a/examples/ui/images/ui_texture_atlas_slice.rs b/examples/ui/images/ui_texture_atlas_slice.rs
index d9aa08e0cfcb3..e55867e1a7103 100644
--- a/examples/ui/images/ui_texture_atlas_slice.rs
+++ b/examples/ui/images/ui_texture_atlas_slice.rs
@@ -84,6 +84,7 @@ fn setup(
                 parent
                     .spawn((
                         Button,
+                        // detect the hover
                         Hovered::default(),
                         ImageNode::from_atlas_image(
                             texture_handle.clone(),
diff --git a/examples/ui/images/ui_texture_slice.rs b/examples/ui/images/ui_texture_slice.rs
index 59752aeac1039..7afe3e2eb30d9 100644
--- a/examples/ui/images/ui_texture_slice.rs
+++ b/examples/ui/images/ui_texture_slice.rs
@@ -70,6 +70,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 parent
                     .spawn((
                         Button,
+                        // detect the hover
                         Hovered::default(),
                         ImageNode {
                             image: image.clone(),
diff --git a/examples/ui/layout/display_and_visibility.rs b/examples/ui/layout/display_and_visibility.rs
index 0a7a55a8fcfbd..cbfd6055bb224 100644
--- a/examples/ui/layout/display_and_visibility.rs
+++ b/examples/ui/layout/display_and_visibility.rs
@@ -377,6 +377,7 @@ where
     parent
         .spawn((
             Button,
+            // Detect the hover
             Hovered::default(),
             Node {
                 align_self: AlignSelf::FlexStart,
diff --git a/examples/ui/layout/size_constraints.rs b/examples/ui/layout/size_constraints.rs
index 666f45d098312..050fde13b1151 100644
--- a/examples/ui/layout/size_constraints.rs
+++ b/examples/ui/layout/size_constraints.rs
@@ -220,6 +220,7 @@ fn spawn_button(
     parent
         .spawn((
             Button,
+            // detect the hover
             Hovered::default(),
             Node {
                 align_items: AlignItems::Center,
diff --git a/examples/ui/scroll_and_overflow/overflow.rs b/examples/ui/scroll_and_overflow/overflow.rs
index 2e259806bc97b..077ef985ccd04 100644
--- a/examples/ui/scroll_and_overflow/overflow.rs
+++ b/examples/ui/scroll_and_overflow/overflow.rs
@@ -91,6 +91,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                         ..default()
                                     },
                                     Button,
+                                    // Hover detection
                                     Hovered::default(),
                                     Outline {
                                         width: px(2),
diff --git a/examples/ui/scroll_and_overflow/scrollbars.rs b/examples/ui/scroll_and_overflow/scrollbars.rs
index 9bbeee00164e2..09a781b8eb0c6 100644
--- a/examples/ui/scroll_and_overflow/scrollbars.rs
+++ b/examples/ui/scroll_and_overflow/scrollbars.rs
@@ -115,6 +115,7 @@ fn scroll_area_demo() -> impl Bundle {
                         border_radius: BorderRadius::all(px(4)),
                         ..default()
                     },
+                    // Hover detection
                     Hovered::default(),
                     BackgroundColor(colors::GRAY2.into()),
                     CoreScrollbarThumb,
@@ -140,6 +141,7 @@ fn scroll_area_demo() -> impl Bundle {
                         border_radius: BorderRadius::all(px(4)),
                         ..default()
                     },
+                    // Hover detection
                     Hovered::default(),
                     BackgroundColor(colors::GRAY2.into()),
                     CoreScrollbarThumb,
diff --git a/examples/ui/styling/box_shadow.rs b/examples/ui/styling/box_shadow.rs
index 2ebe52efaa7ec..3d8e60930e70a 100644
--- a/examples/ui/styling/box_shadow.rs
+++ b/examples/ui/styling/box_shadow.rs
@@ -123,6 +123,11 @@ struct HeldButton {
     last_repeat: Option<f64>,
 }
 
+/// Marker which detects the hover.
+#[derive(Component)]
+#[require(Button, Hovered)]
+struct HoverableButton;
+
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
@@ -270,8 +275,7 @@ fn setup(
                     ..default()
                 },
                 children![(
-                    Button,
-                    Hovered::default(),
+                    HoverableButton,
                     Node {
                         width: px(90),
                         height: px(32),
@@ -337,8 +341,7 @@ fn build_setting_row(
                 )],
             ),
             (
-                Button,
-                Hovered::default(),
+                HoverableButton,
                 Node {
                     width: px(28),
                     height: px(28),
@@ -386,8 +389,7 @@ fn build_setting_row(
                 }],
             ),
             (
-                Button,
-                Hovered::default(),
+                HoverableButton,
                 Node {
                     width: px(28),
                     height: px(28),
diff --git a/examples/ui/ui_transform.rs b/examples/ui/ui_transform.rs
index 285c463158bbe..ec6aedac49725 100644
--- a/examples/ui/ui_transform.rs
+++ b/examples/ui/ui_transform.rs
@@ -31,6 +31,7 @@ pub struct RotateButton(pub Rot2);
 #[derive(Component)]
 pub struct ScaleButton(pub f32);
 
+/// A button that detects the hover
 #[derive(Component)]
 #[require(Button, Hovered)]
 struct HoverableButton;
diff --git a/examples/ui/widgets/button.rs b/examples/ui/widgets/button.rs
index 64032cddb7881..1ec273ec0c0c3 100644
--- a/examples/ui/widgets/button.rs
+++ b/examples/ui/widgets/button.rs
@@ -85,6 +85,7 @@ fn button(asset_server: &AssetServer) -> impl Bundle {
         },
         children![(
             Button,
+            // detect the hover
             Hovered::default(),
             Node {
                 width: px(150),
diff --git a/examples/ui/widgets/standard_widgets.rs b/examples/ui/widgets/standard_widgets.rs
index 368f99eddaabc..95e656c721ed2 100644
--- a/examples/ui/widgets/standard_widgets.rs
+++ b/examples/ui/widgets/standard_widgets.rs
@@ -59,6 +59,11 @@ const ELEMENT_OUTLINE: Color = Color::srgb(0.45, 0.45, 0.45);
 const ELEMENT_FILL: Color = Color::srgb(0.35, 0.75, 0.35);
 const ELEMENT_FILL_DISABLED: Color = Color::srgb(0.5019608, 0.5019608, 0.5019608);
 
+/// Marker which detects the hover.
+#[derive(Component)]
+#[require(Button, Hovered)]
+struct HoverableButton;
+
 /// Marker which identifies buttons with a particular style, in this case the "Demo style".
 #[derive(Component)]
 struct DemoButton;
@@ -201,8 +206,7 @@ fn button(asset_server: &AssetServer) -> impl Bundle {
             ..default()
         },
         DemoButton,
-        Button,
-        Hovered::default(),
+        HoverableButton,
         TabIndex(0),
         BorderColor::all(Color::BLACK),
         BackgroundColor(NORMAL_BUTTON),
@@ -238,7 +242,7 @@ fn menu_button(asset_server: &AssetServer) -> impl Bundle {
             },
             DemoMenuButton,
             MenuButton,
-            Hovered::default(),
+            HoverableButton,
             TabIndex(0),
             BorderColor::all(Color::BLACK),
             BackgroundColor(NORMAL_BUTTON),
@@ -391,7 +395,7 @@ fn slider(min: f32, max: f32, value: f32) -> impl Bundle {
             ..default()
         },
         Name::new("Slider"),
-        Hovered::default(),
+        HoverableButton,
         DemoSlider,
         Slider {
             track_click: TrackClick::Snap,
@@ -530,7 +534,7 @@ fn checkbox(asset_server: &AssetServer, caption: &str) -> impl Bundle {
             ..default()
         },
         Name::new("Checkbox"),
-        Hovered::default(),
+        HoverableButton,
         DemoCheckbox,
         Checkbox,
         TabIndex(0),
@@ -743,7 +747,7 @@ fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl B
             ..default()
         },
         Name::new("RadioButton"),
-        Hovered::default(),
+        HoverableButton,
         DemoRadio(value),
         RadioButton,
         Children::spawn((
@@ -880,7 +884,7 @@ fn menu_item(asset_server: &AssetServer) -> impl Bundle {
         },
         DemoMenuItem,
         MenuItem,
-        Hovered::default(),
+        HoverableButton,
         TabIndex(0),
         BackgroundColor(NORMAL_BUTTON),
         children![(
diff --git a/examples/ui/widgets/standard_widgets_observers.rs b/examples/ui/widgets/standard_widgets_observers.rs
index b6e15cfbc98de..fd2d5107bf74a 100644
--- a/examples/ui/widgets/standard_widgets_observers.rs
+++ b/examples/ui/widgets/standard_widgets_observers.rs
@@ -133,6 +133,7 @@ fn button(asset_server: &AssetServer) -> impl Bundle {
         },
         DemoButton,
         Button,
+        // Hover detection
         Hovered::default(),
         TabIndex(0),
         BorderColor::all(Color::BLACK),
@@ -226,6 +227,7 @@ fn slider(min: f32, max: f32, value: f32) -> impl Bundle {
             ..default()
         },
         Name::new("Slider"),
+        // Hover detection
         Hovered::default(),
         DemoSlider,
         Slider::default(),
@@ -336,6 +338,7 @@ fn checkbox(asset_server: &AssetServer, caption: &str) -> impl Bundle {
             ..default()
         },
         Name::new("Checkbox"),
+        // Hover detection
         Hovered::default(),
         DemoCheckbox,
         Checkbox,
diff --git a/examples/ui/widgets/tab_navigation.rs b/examples/ui/widgets/tab_navigation.rs
index d49dec4ff89a9..542190360a7b9 100644
--- a/examples/ui/widgets/tab_navigation.rs
+++ b/examples/ui/widgets/tab_navigation.rs
@@ -126,6 +126,7 @@ fn setup(mut commands: Commands) {
                             parent
                                 .spawn((
                                     Button,
+                                    // detect the hover
                                     Hovered::default(),
                                     Node {
                                         width: px(200),
diff --git a/examples/ui/widgets/vertical_slider.rs b/examples/ui/widgets/vertical_slider.rs
index 857f08c6a963b..ef8099a8d71f6 100644
--- a/examples/ui/widgets/vertical_slider.rs
+++ b/examples/ui/widgets/vertical_slider.rs
@@ -145,6 +145,7 @@ fn vertical_slider() -> impl Bundle {
         },
         DemoSlider,
         VerticalSlider,
+        // Hover detection
         Hovered::default(),
         Slider {
             track_click: TrackClick::Snap,
@@ -203,6 +204,7 @@ fn horizontal_slider() -> impl Bundle {
             ..default()
         },
         DemoSlider,
+        // Hover detection
         Hovered::default(),
         Slider {
             track_click: TrackClick::Snap,

From d086b8f9dd78517c71bb4f7436cc23b5da96cdde Mon Sep 17 00:00:00 2001
From: Luke Yoo <w.lukeyoo@gmail.com>
Date: Wed, 11 Mar 2026 21:49:45 -0700
Subject: [PATCH 8/8] Remove a redundant observer from
 examples/games/game_menu.rs

---
 examples/games/game_menu.rs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index 01744d4a57639..13f375a7b676d 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -273,7 +273,6 @@ mod menu {
             .add_systems(Update, menu_action.run_if(in_state(GameState::Menu)))
             .add_observer(button_on_interaction::<Add, SelectedOption>)
             .add_observer(button_on_interaction::<Add, Pressed>)
-            .add_observer(button_on_interaction::<Insert, Hovered>)
             .add_observer(button_on_interaction::<Insert, Hovered>);
     }