diff --git a/apps/docs/content/components/button/custom-impl.ts b/apps/docs/content/components/button/custom-impl.ts
index 4fa0c7fe08..ba0fd6e3e4 100644
--- a/apps/docs/content/components/button/custom-impl.ts
+++ b/apps/docs/content/components/button/custom-impl.ts
@@ -6,7 +6,6 @@ const MyButton = forwardRef((props, ref) => {
   const {
     domRef,
     children,
-    ripples,
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
@@ -15,11 +14,14 @@ const MyButton = forwardRef((props, ref) => {
     isLoading,
     disableRipple,
     getButtonProps,
+    getRippleProps,
   } = useButton({
     ref,
     ...props,
   });
 
+  const {ripples} = getRippleProps();
+
   return (
     <button ref={domRef} {...getButtonProps()}>
       {startContent}
@@ -45,7 +47,6 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     domRef,
     children,
-    ripples,
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
@@ -54,11 +55,14 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     isLoading,
     disableRipple,
     getButtonProps,
+    getRippleProps,
   } = useButton({
     ref,
     ...props,
   });
 
+  const {ripples} = getRippleProps();
+
   return (
     <button ref={domRef} {...getButtonProps()}>
       {startContent}