diff --git a/src/components/button/mod.rs b/src/components/button/mod.rs index f8af3e8..346b3dc 100644 --- a/src/components/button/mod.rs +++ b/src/components/button/mod.rs @@ -277,12 +277,6 @@ pub fn Button( }, }; - let additional_class = if icon_el.is_some() { - "group/with-icon" - } else { - "" - }; - let maybe_backdrop_builder = LocalResource::new(ButtonBackdropBuilder::load); let (extension_dimension, set_extension_dimension) = signal::>(None); @@ -333,19 +327,28 @@ pub fn Button( // immediately (untracked, so this effect stays keyed to canvas/builder only), then store it. // The wake guard makes the initial wake safe even if the visibility effect also fires true. Effect::new(move || { - if let Some(canvas) = canvas_ref.get() { - if let Some(backdrop_builder) = maybe_backdrop_builder.get() { - let backdrop = - backdrop_builder.create_backdrop(canvas, ButtonBackdropCfg { color }); - let ctrls = create_render_loop(backdrop, animation_direction.clone()); - - if canvas_in_view.get_untracked() { - (ctrls.wake)(); - } else { - (ctrls.sleep)(); + if let Some(window) = web_sys::window() { + let no_amiations = window + .match_media("(prefers-reduced-motion: reduce)") + .is_ok_and(|maybe_motion_query| { + maybe_motion_query.is_some_and(|motion_query| motion_query.matches()) + }); + if !no_amiations { + if let Some(canvas) = canvas_ref.get() { + if let Some(backdrop_builder) = maybe_backdrop_builder.get() { + let backdrop = + backdrop_builder.create_backdrop(canvas, ButtonBackdropCfg { color }); + let ctrls = create_render_loop(backdrop, animation_direction.clone()); + + if canvas_in_view.get_untracked() { + (ctrls.wake)(); + } else { + (ctrls.sleep)(); + } + + controls.set_value(Some(ctrls)); + } } - - controls.set_value(Some(ctrls)); } } }); @@ -373,13 +376,30 @@ pub fn Button( }); }); + let additional_class = { + let has_icon = icon_el.is_some(); + move || { + let mut base = String::from(""); + + if has_icon { + base = tw_join!(base, "group/with-icon"); + }; + + if extension_dimension.get().is_none() { + base = tw_join!(base, "overflow-x-hidden"); + }; + + base + } + }; + match use_as { ButtonUsecase::Button { on_click } => Either::Left(view! {