diff --git a/docs/src/pages/demos/chips/Chips.tsx b/docs/src/pages/demos/chips/Chips.tsx
new file mode 100644
index 00000000000000..9f634fb0abd830
--- /dev/null
+++ b/docs/src/pages/demos/chips/Chips.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Chip from '@material-ui/core/Chip';
+import FaceIcon from '@material-ui/icons/Face';
+import DoneIcon from '@material-ui/icons/Done';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+    },
+    chip: {
+      margin: theme.spacing(1),
+    },
+  });
+
+function handleDelete() {
+  alert('You clicked the delete icon.'); // eslint-disable-line no-alert
+}
+
+function handleClick() {
+  alert('You clicked the Chip.'); // eslint-disable-line no-alert
+}
+
+function Chips(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div className={classes.root}>
+      <Chip label="Basic Chip" className={classes.chip} />
+      <Chip
+        avatar={<Avatar>MB</Avatar>}
+        label="Clickable Chip"
+        onClick={handleClick}
+        className={classes.chip}
+      />
+      <Chip
+        avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
+        label="Deletable Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+      />
+      <Chip
+        avatar={
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        }
+        label="Clickable Deletable Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+      />
+      <Chip
+        icon={<FaceIcon />}
+        label="Clickable Deletable Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+      />
+      <Chip
+        label="Custom delete icon Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        label="Clickable Link Chip"
+        className={classes.chip}
+        component="a"
+        href="#chip"
+        clickable
+      />
+      <Chip
+        avatar={<Avatar>MB</Avatar>}
+        label="Primary Clickable Chip"
+        clickable
+        className={classes.chip}
+        color="primary"
+        onDelete={handleDelete}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        icon={<FaceIcon />}
+        label="Primary Clickable Chip"
+        clickable
+        className={classes.chip}
+        color="primary"
+        onDelete={handleDelete}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        label="Deletable Primary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="primary"
+      />
+      <Chip
+        avatar={
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        }
+        label="Deletable Secondary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="secondary"
+      />
+      <Chip
+        icon={<FaceIcon />}
+        label="Deletable Secondary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="secondary"
+      />
+    </div>
+  );
+}
+
+Chips.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(Chips);
diff --git a/docs/src/pages/demos/chips/OutlinedChips.tsx b/docs/src/pages/demos/chips/OutlinedChips.tsx
new file mode 100644
index 00000000000000..297a9ba3cadc04
--- /dev/null
+++ b/docs/src/pages/demos/chips/OutlinedChips.tsx
@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Chip from '@material-ui/core/Chip';
+import FaceIcon from '@material-ui/icons/Face';
+import DoneIcon from '@material-ui/icons/Done';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+    },
+    chip: {
+      margin: theme.spacing(1),
+    },
+  });
+
+function handleDelete() {
+  alert('You clicked the delete icon.'); // eslint-disable-line no-alert
+}
+
+function handleClick() {
+  alert('You clicked the Chip.'); // eslint-disable-line no-alert
+}
+
+function OutlinedChips(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div className={classes.root}>
+      <Chip label="Basic Chip" className={classes.chip} variant="outlined" />
+      <Chip
+        avatar={<Avatar>MB</Avatar>}
+        label="Clickable Chip"
+        onClick={handleClick}
+        className={classes.chip}
+        variant="outlined"
+      />
+      <Chip
+        avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
+        label="Deletable Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        variant="outlined"
+      />
+      <Chip
+        avatar={
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        }
+        label="Clickable Deletable Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+        variant="outlined"
+      />
+      <Chip
+        icon={<FaceIcon />}
+        label="Clickable Deletable Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+        variant="outlined"
+      />
+      <Chip
+        label="Custom delete icon Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+        deleteIcon={<DoneIcon />}
+        variant="outlined"
+      />
+      <Chip
+        label="Clickable Link Chip"
+        className={classes.chip}
+        component="a"
+        href="#chip"
+        clickable
+        variant="outlined"
+      />
+      <Chip
+        avatar={<Avatar>MB</Avatar>}
+        label="Primary Clickable Chip"
+        clickable
+        className={classes.chip}
+        color="primary"
+        onDelete={handleDelete}
+        deleteIcon={<DoneIcon />}
+        variant="outlined"
+      />
+      <Chip
+        icon={<FaceIcon />}
+        label="Primary Clickable Chip"
+        clickable
+        className={classes.chip}
+        color="primary"
+        onDelete={handleDelete}
+        deleteIcon={<DoneIcon />}
+        variant="outlined"
+      />
+      <Chip
+        label="Deletable Primary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="primary"
+        variant="outlined"
+      />
+      <Chip
+        avatar={
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        }
+        label="Deletable Secondary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="secondary"
+        variant="outlined"
+      />
+      <Chip
+        icon={<FaceIcon />}
+        label="Deletable Secondary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="secondary"
+        variant="outlined"
+      />
+    </div>
+  );
+}
+
+OutlinedChips.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(OutlinedChips);
diff --git a/packages/material-ui/src/Chip/Chip.d.ts b/packages/material-ui/src/Chip/Chip.d.ts
index 7cfb96e2ec5c4b..0de3463d3128f1 100644
--- a/packages/material-ui/src/Chip/Chip.d.ts
+++ b/packages/material-ui/src/Chip/Chip.d.ts
@@ -1,18 +1,21 @@
 import * as React from 'react';
-import { StandardProps, PropTypes } from '..';
+import { PropTypes } from '..';
+import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
 
-export interface ChipProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ChipClassKey> {
-  avatar?: React.ReactElement;
-  clickable?: boolean;
-  color?: PropTypes.Color;
-  component?: React.ElementType<ChipProps>;
-  deleteIcon?: React.ReactElement;
-  icon?: React.ReactElement;
-  label?: React.ReactNode;
-  onDelete?: React.EventHandler<any>;
-  variant?: 'default' | 'outlined';
-}
+declare const Chip: OverridableComponent<{
+  props: {
+    avatar?: React.ReactElement;
+    clickable?: boolean;
+    color?: PropTypes.Color;
+    deleteIcon?: React.ReactElement;
+    icon?: React.ReactElement;
+    label?: React.ReactNode;
+    onDelete?: React.EventHandler<any>;
+    variant?: 'default' | 'outlined';
+  };
+  defaultComponent: 'div';
+  classKey: ChipClassKey;
+}>;
 
 export type ChipClassKey =
   | 'root'
@@ -41,6 +44,6 @@ export type ChipClassKey =
   | 'deleteIconOutlinedColorPrimary'
   | 'deleteIconOutlinedColorSecondary';
 
-declare const Chip: React.ComponentType<ChipProps>;
+export type ChipProps = SimplifiedPropsOf<typeof Chip>;
 
 export default Chip;