[docs][Button] Add demo for disableFocusRipple prop

Author: Sujaykiran2102

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+
+export default function DisableFocusRippleDemo() {
+  return (
+    <Stack direction="row" spacing={1}>
+      <Button variant="contained">Default</Button>
+      <Button variant="contained" disableFocusRipple>
+        Focus Ripple Disabled
+      </Button>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+
+export default function DisableFocusRippleDemo() {
+  return (
+    <Stack direction="row" spacing={1}>
+      <Button variant="contained">Default</Button>
+      <Button variant="contained" disableFocusRipple>
+        Focus Ripple Disabled
+      </Button>
+    </Stack>
+  );
+}

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)