[docs][Button] Add demo for disableFocusRipple prop

Author: Sujaykiran2102

docs/data/material/components/buttons/DisableFocusRippleDemo.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+
+export default function DisableFocusRippleDemo() {
+  return (
+    <Box>
+      <Button variant="contained" sx={{ mr: 1 }}>
+        Default
+      </Button>
+      <Button variant="contained" disableFocusRipple>
+        Focus Ripple Disabled
+      </Button>
+    </Box>
+  );
+}

docs/data/material/components/buttons/DisableFocusRippleDemo.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+
+export default function DisableFocusRippleDemo() {
+  return (
+    <Box>
+      <Button variant="contained" sx={{ mr: 1 }}>
+        Default
+      </Button>
+      <Button variant="contained" disableFocusRipple>
+        Focus Ripple Disabled
+      </Button>
+    </Box>
+  );
+}

docs/data/material/components/buttons/buttons.md

@@ -27,6 +27,12 @@ The `Button` comes with three variants: text (default), contained, and outlined.
 
 {{"demo": "BasicButtons.js"}}
 
+## Disable focus ripple
+
+The `disableFocusRipple` prop removes the ripple effect that appears when the button is focused using the keyboard.
+
+<Demo file="buttons/DisableFocusRippleDemo.js" />
+
 ### Text button
 
 [Text buttons](https://m2.material.io/components/buttons#text-button)