diff --git a/docs/src/pages/components/backdrop/SimpleBackdrop.js b/docs/src/pages/components/backdrop/SimpleBackdrop.js
index 09cf917a94efd1..141b7f694616e2 100644
--- a/docs/src/pages/components/backdrop/SimpleBackdrop.js
+++ b/docs/src/pages/components/backdrop/SimpleBackdrop.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
@@ -22,9 +23,9 @@ export default function SimpleBackdrop() {
 
   return (
     <div>
-      <button type="button" onClick={handleToggle}>
+      <Button variant="outlined" color="primary" onClick={handleToggle}>
         Show backdrop
-      </button>
+      </Button>
       <Backdrop className={classes.backdrop} open={open} onClick={handleClose}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/docs/src/pages/components/backdrop/SimpleBackdrop.tsx b/docs/src/pages/components/backdrop/SimpleBackdrop.tsx
index 494f7d48e4921d..8ed9d7ad81dc40 100644
--- a/docs/src/pages/components/backdrop/SimpleBackdrop.tsx
+++ b/docs/src/pages/components/backdrop/SimpleBackdrop.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@material-ui/core/Button';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -24,9 +25,9 @@ export default function SimpleBackdrop() {
 
   return (
     <div>
-      <button type="button" onClick={handleToggle}>
+      <Button variant="outlined" color="primary" onClick={handleToggle}>
         Show backdrop
-      </button>
+      </Button>
       <Backdrop className={classes.backdrop} open={open} onClick={handleClose}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/docs/src/pages/components/dialogs/CustomizedDialogs.js b/docs/src/pages/components/dialogs/CustomizedDialogs.js
index 2af60d5a52bb7b..8037bfeace6245 100644
--- a/docs/src/pages/components/dialogs/CustomizedDialogs.js
+++ b/docs/src/pages/components/dialogs/CustomizedDialogs.js
@@ -61,7 +61,7 @@ export default function CustomizedDialogs() {
 
   return (
     <div>
-      <Button variant="outlined" color="secondary" onClick={handleClickOpen}>
+      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
         Open dialog
       </Button>
       <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
diff --git a/docs/src/pages/components/dialogs/CustomizedDialogs.tsx b/docs/src/pages/components/dialogs/CustomizedDialogs.tsx
index 02fd8488a8465e..258111f52ff536 100644
--- a/docs/src/pages/components/dialogs/CustomizedDialogs.tsx
+++ b/docs/src/pages/components/dialogs/CustomizedDialogs.tsx
@@ -68,7 +68,7 @@ export default function CustomizedDialogs() {
 
   return (
     <div>
-      <Button variant="outlined" color="secondary" onClick={handleClickOpen}>
+      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
         Open dialog
       </Button>
       <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
diff --git a/docs/src/pages/components/dialogs/SimpleDialog.js b/docs/src/pages/components/dialogs/SimpleDialog.js
index 0234d572a6a939..9c7d185eaf3815 100644
--- a/docs/src/pages/components/dialogs/SimpleDialog.js
+++ b/docs/src/pages/components/dialogs/SimpleDialog.js
@@ -55,7 +55,7 @@ function SimpleDialog(props) {
               <AddIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary="add account" />
+          <ListItemText primary="Add account" />
         </ListItem>
       </List>
     </Dialog>
diff --git a/docs/src/pages/components/dialogs/SimpleDialog.tsx b/docs/src/pages/components/dialogs/SimpleDialog.tsx
index 0cea07d32f2a20..4386c8e3459535 100644
--- a/docs/src/pages/components/dialogs/SimpleDialog.tsx
+++ b/docs/src/pages/components/dialogs/SimpleDialog.tsx
@@ -59,7 +59,7 @@ function SimpleDialog(props: SimpleDialogProps) {
               <AddIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary="add account" />
+          <ListItemText primary="Add account" />
         </ListItem>
       </List>
     </Dialog>