Use material button to avoid extra line and destruction of `preview…

…` given the need for explicit `type`

docs/data/charts/zoom-and-pan/ZoomControlled.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
 
+import Button from '@mui/material/Button';
+
 export default function ZoomControlled() {
   const [zoom, setZoom] = React.useState([
     {
@@ -12,9 +14,9 @@ export default function ZoomControlled() {
 
   return (
     <div>
-      <button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
+      <Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
         Reset zoom
-      </button>
+      </Button>
       <LineChartPro
         {...chartProps}
         zoom={zoom}

docs/data/charts/zoom-and-pan/ZoomControlled.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
 import { ZoomData } from '@mui/x-charts-pro/context';
+import Button from '@mui/material/Button';
 
 export default function ZoomControlled() {
   const [zoom, setZoom] = React.useState<ZoomData[]>([
@@ -13,9 +14,9 @@ export default function ZoomControlled() {
 
   return (
     <div>
-      <button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
+      <Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
         Reset zoom
-      </button>
+      </Button>
       <LineChartPro
         {...chartProps}
         zoom={zoom}

docs/data/charts/zoom-and-pan/ZoomControlled.tsx.preview

@@ -1,6 +1,6 @@
-<button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
+<Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
   Reset zoom
-</button>
+</Button>
 <LineChartPro
   {...chartProps}
   zoom={zoom}