From c75c45c1ab42975d869d7fedf9adf80e9f1e7dcc Mon Sep 17 00:00:00 2001
From: wujingquan <i@wujingquan.com>
Date: Mon, 21 Dec 2020 23:23:17 +0800
Subject: [PATCH 1/3] add

---
 src/components/Empty/Network.tsx       | 110 +++++++++++++++++++++++++
 src/components/Empty/helper.tsx        |  53 ++++++++++++
 src/components/Empty/index.scss        |  39 +++++++++
 src/components/Empty/index.stories.tsx |  91 ++++++++++++++++++++
 src/components/Empty/index.tsx         |  64 ++++++++++++++
 src/components/Empty/types.ts          |   8 ++
 src/index.tsx                          |   5 +-
 src/styles/variables.scss              |  17 ++++
 8 files changed, 386 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Empty/Network.tsx
 create mode 100644 src/components/Empty/helper.tsx
 create mode 100644 src/components/Empty/index.scss
 create mode 100644 src/components/Empty/index.stories.tsx
 create mode 100644 src/components/Empty/index.tsx
 create mode 100644 src/components/Empty/types.ts

diff --git a/src/components/Empty/Network.tsx b/src/components/Empty/Network.tsx
new file mode 100644
index 000000000..aa9e225f4
--- /dev/null
+++ b/src/components/Empty/Network.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+
+const renderStop = (color: string, offset: number, opacity?: number) => (
+  <stop stopColor={color} offset={`${offset}%`} stopOpacity={opacity} />
+);
+
+export const Network = (
+  <svg viewBox='0 0 160 160'>
+    <defs>
+      <linearGradient id='c' x1='64.022%' y1='100%' x2='64.022%' y2='0%'>
+        {renderStop('#FFF', 0, 0.5)}
+        {renderStop('#F2F3F5', 100)}
+      </linearGradient>
+      <linearGradient id='d' x1='64.022%' y1='96.956%' x2='64.022%' y2='0%'>
+        {renderStop('#F2F3F5', 0, 0.3)}
+        {renderStop('#F2F3F5', 100)}
+      </linearGradient>
+      <linearGradient id='h' x1='50%' y1='0%' x2='50%' y2='84.459%'>
+        {renderStop('#EBEDF0', 0)}
+        {renderStop('#DCDEE0', 100, 0)}
+      </linearGradient>
+      <linearGradient id='i' x1='100%' y1='0%' x2='100%' y2='100%'>
+        {renderStop('#EAEDF0', 0)}
+        {renderStop('#DCDEE0', 100)}
+      </linearGradient>
+      <linearGradient id='k' x1='100%' y1='100%' x2='100%' y2='0%'>
+        {renderStop('#EAEDF0', 0)}
+        {renderStop('#DCDEE0', 100)}
+      </linearGradient>
+      <linearGradient id='m' x1='0%' y1='43.982%' x2='100%' y2='54.703%'>
+        {renderStop('#EAEDF0', 0)}
+        {renderStop('#DCDEE0', 100)}
+      </linearGradient>
+      <linearGradient id='n' x1='94.535%' y1='43.837%' x2='5.465%' y2='54.948%'>
+        {renderStop('#EAEDF0', 0)}
+        {renderStop('#DCDEE0', 100)}
+      </linearGradient>
+      <radialGradient
+        id='g'
+        cx='50%'
+        cy='0%'
+        fx='50%'
+        fy='0%'
+        r='100%'
+        gradientTransform='matrix(0 1 -.54835 0 .5 -.5)'
+      >
+        {renderStop('#EBEDF0', 0)}
+        {renderStop('#FFF', 100, 0)}
+      </radialGradient>
+    </defs>
+    <g fill='none' fillRule='evenodd'>
+      <g opacity='.8'>
+        <path
+          d='M0 124V46h20v20h14v58H0z'
+          fill='url(#c)'
+          transform='matrix(-1 0 0 1 36 7)'
+        />
+        <path
+          d='M40.5 5a8.504 8.504 0 018.13 6.009l.12-.005L49 11a8 8 0 11-1 15.938V27H34v-.174a6.5 6.5 0 11-1.985-12.808A8.5 8.5 0 0140.5 5z'
+          fill='url(#d)'
+          transform='translate(2 7)'
+        />
+        <path
+          d='M96.016 0a4.108 4.108 0 013.934 2.868l.179-.004c2.138 0 3.871 1.71 3.871 3.818 0 2.109-1.733 3.818-3.871 3.818-.164 0-.325-.01-.484-.03v.03h-6.774v-.083a3.196 3.196 0 01-.726.083C90.408 10.5 89 9.111 89 7.398c0-1.636 1.284-2.976 2.911-3.094a3.555 3.555 0 01-.008-.247c0-2.24 1.842-4.057 4.113-4.057z'
+          fill='url(#d)'
+          transform='translate(2 7)'
+        />
+        <path
+          d='M121 8h22.231v14H152v77.37h-31V8z'
+          fill='url(#c)'
+          transform='translate(2 7)'
+        />
+      </g>
+      <path fill='url(#g)' d='M0 139h160v21H0z' />
+      <path
+        d='M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z'
+        fill='url(#h)'
+        fillRule='nonzero'
+        transform='translate(43 36)'
+      />
+      <g opacity='.6' strokeLinecap='round' strokeWidth='7'>
+        <path
+          d='M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12'
+          stroke='url(#i)'
+          transform='translate(43 36)'
+        />
+        <path
+          d='M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145'
+          stroke='url(#i)'
+          transform='translate(43 36)'
+        />
+        <path
+          d='M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12'
+          stroke='url(#k)'
+          transform='rotate(-180 76.483 42.257)'
+        />
+        <path
+          d='M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145'
+          stroke='url(#k)'
+          transform='rotate(-180 89.791 42.146)'
+        />
+      </g>
+      <g transform='translate(31 105)' fillRule='nonzero'>
+        <rect fill='url(#m)' width='98' height='34' rx='2' />
+        <rect fill='#FFF' x='9' y='8' width='80' height='18' rx='1.114' />
+        <rect fill='url(#n)' x='15' y='12' width='18' height='6' rx='1.114' />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/src/components/Empty/helper.tsx b/src/components/Empty/helper.tsx
new file mode 100644
index 000000000..1ab60a5aa
--- /dev/null
+++ b/src/components/Empty/helper.tsx
@@ -0,0 +1,53 @@
+// import React, { ReactElement } from 'react';
+
+// import SpinnerLoading from '../../assets/icons/loaders/Spinner';
+// import CircularLoading from '../../assets/icons/loaders/Circular';
+
+// import { LoadingIconProps } from './types';
+
+// export const renderLoadingIcon = ({
+//   className,
+//   loadingType = 'circular',
+//   loadingText,
+//   loadingSize
+// }: LoadingIconProps): ReactElement => {
+//   return (
+//     <React.Fragment>
+//       {loadingType === 'spinner' ? (
+//         <SpinnerLoading loadingSize={loadingSize} className={className} />
+//       ) : (
+//         <CircularLoading loadingSize={loadingSize} className={className} />
+//       )}
+//       {loadingText && <span>{loadingText}</span>}
+//     </React.Fragment>
+//   );
+// };
+
+// export const getContrastTextColor = (colorHex: string): string => {
+//   let r, g, b;
+//   if (colorHex.length !== 6 && colorHex.slice(0, 3) !== 'rgb') {
+//     return 'black';
+//   } // return black if color is not supplied
+//   else if (colorHex.length === 6) {
+//     r = parseInt(colorHex[0] + colorHex[1], 16);
+//     g = parseInt(colorHex[2] + colorHex[3], 16);
+//     b = parseInt(colorHex[4] + colorHex[5], 16);
+//   } else if (colorHex.length !== 6 && colorHex.slice(0, 3) === 'rgb') {
+//     const startIndex = colorHex.indexOf('(');
+//     const endIndex = colorHex.indexOf(')');
+//     const rgb = colorHex
+//       .slice(startIndex + 1, endIndex - startIndex)
+//       .split(',');
+//     r = rgb[0];
+//     g = rgb[1];
+//     b = rgb[2];
+//   }
+//   const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+//   return brightness > 125 ? 'black' : 'white';
+// };
+
+// export const colorType = (colorHex: string): string => {
+//   if (colorHex.length !== 6 && colorHex.slice(0, 3) === 'rgb') return colorHex;
+//   const result = '#' + colorHex;
+//   return result;
+// };
diff --git a/src/components/Empty/index.scss b/src/components/Empty/index.scss
new file mode 100644
index 000000000..7bb17674c
--- /dev/null
+++ b/src/components/Empty/index.scss
@@ -0,0 +1,39 @@
+// @import '../../styles/colors.scss';
+// @import '../../styles/spacing.scss';
+// @import '../../styles/typography.scss';
+// @import '../../styles/opacity.scss';
+@import '../../styles/variables.scss';
+
+$baseClass: 'vant-button';
+
+
+.#{$baseClass} {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: $empty-padding;
+
+  &__image {
+    width: $empty-image-size;
+    height: $empty-image-size;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__description {
+    margin-top: $empty-description-margin-top;
+    padding: $empty-description-padding;
+    color: $empty-description-color;
+    font-size: $empty-description-font-size;
+    line-height: $empty-description-line-height;
+  }
+
+  &__bottom {
+    margin-top: $empty-bottom-margin-top;
+  }
+}
diff --git a/src/components/Empty/index.stories.tsx b/src/components/Empty/index.stories.tsx
new file mode 100644
index 000000000..4306190f8
--- /dev/null
+++ b/src/components/Empty/index.stories.tsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import Empty from '.';
+import Button from '../Button';
+import Image from '../Image';
+
+export default {
+  title: 'Empty',
+  component: Empty
+};
+
+export const BasicUsage = () => (
+  <div className='storybook__container empty'>
+    <Empty />
+  </div>
+);
+
+export const Description = () => (
+  <div className='storybook__container empty'>
+    <Empty description='description' />
+  </div>
+);
+
+export const ImageType = () => {
+  const [showType, setShowType] = useState('error');
+
+  return (
+    <div className='storybook__container empty'>
+      <Button
+        click={() => {
+          setShowType('error');
+        }}
+        text='Error'
+        type='primary'
+      />
+      <Button
+        click={() => {
+          setShowType('network');
+        }}
+        text='Network'
+        type='info'
+      />
+      <Button
+        click={() => {
+          setShowType('search');
+        }}
+        text='Search'
+        type='warning'
+      />
+      <Button
+        click={() => {
+          setShowType('custom');
+        }}
+        text='Custom'
+        type='danger'
+      />
+      {showType === 'error' && (
+        <Empty image='error' description='description' />
+      )}
+      {showType === 'network' && (
+        <Empty image='network' description='description' />
+      )}
+      {showType === 'search' && (
+        <Empty image='search' description='description' />
+      )}
+      {showType === 'custom' && (
+        <Empty image={<Image src='https://img.yzcdn.cn/vant/cat.jpeg' />} />
+      )}
+    </div>
+  );
+};
+
+export const CustomImage = () => (
+  <div className='storybook__container empty'>
+    <Empty
+      image='https://img.yzcdn.cn/vant/custom-empty-image.png'
+      description='description'
+    />
+  </div>
+);
+
+export const BottomContent = () => (
+  <div className='storybook__container empty'>
+    <Empty
+      bottom={
+        <Button round type='danger'>
+          Button
+        </Button>
+      }
+    />
+  </div>
+);
diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx
new file mode 100644
index 000000000..9774d9576
--- /dev/null
+++ b/src/components/Empty/index.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import classnames from '../../utils/classNames';
+
+import { Props } from './types';
+
+import './index.scss';
+import { Network } from './Network';
+
+const baseClass = 'vant-button';
+const PRESET_IMAGES = ['error', 'search', 'default'];
+
+export default function Empty({
+  imageSize,
+  description,
+  image = 'default',
+  bottom
+}: Props) {
+  console.log(imageSize);
+  console.log(description);
+  console.log(image);
+
+  const containerProps = {
+    className: classnames(`${baseClass}`, []),
+    style: {}
+  };
+
+  const imageProps = {
+    className: classnames(`${baseClass}__image`, []),
+    style: {}
+  };
+
+  const bottomProps = {
+    className: classnames(`${baseClass}__bottom`, []),
+    style: {}
+  };
+
+  const descriptionProps = {
+    className: classnames(`${baseClass}__description`, []),
+    style: {}
+  };
+
+  const renderImage = () => {
+    if (image === 'network') {
+      return Network;
+    }
+    if (typeof image === 'string') {
+      if (PRESET_IMAGES.includes(image)) {
+        image = `https://img.yzcdn.cn/vant/empty-image-${image}.png`;
+      }
+      return <img src={image} />;
+    } else {
+      return image;
+    }
+  };
+
+  return (
+    <div {...containerProps}>
+      <div {...imageProps}>{renderImage()}</div>
+      {description && <p {...descriptionProps}>{description}</p>}
+      {bottom && <div {...bottomProps}>{bottom}</div>}
+    </div>
+  );
+}
diff --git a/src/components/Empty/types.ts b/src/components/Empty/types.ts
new file mode 100644
index 000000000..34e605cdd
--- /dev/null
+++ b/src/components/Empty/types.ts
@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+
+export interface Props {
+  imageSize?: number | string;
+  description?: string | ReactElement;
+  image?: string | ReactElement;
+  bottom?: ReactElement;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 62b093c1a..0da5f3270 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -12,6 +12,7 @@ import Slider from './components/Slider';
 import Checkbox from './components/Checkbox';
 import Radio from './components/Radio';
 import Stepper from './components/Stepper';
+import Empty from './components/Empty';
 
 export { default as Button } from './components/Button';
 export { default as Icon } from './components/Icons';
@@ -27,6 +28,7 @@ export { default as Slider } from './components/Slider';
 export { default as Checkbox } from './components/Checkbox';
 export { default as Radio } from './components/Radio';
 export { default as Stepper } from './components/Stepper';
+export { default as Empty } from './components/Empty';
 
 const Vant = {
   Button,
@@ -42,7 +44,8 @@ const Vant = {
   Slider,
   Checkbox,
   Radio,
-  Stepper
+  Stepper,
+  Empty
 };
 
 export default Vant;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 89bf0f928..774599e84 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -16,3 +16,20 @@ $icon-dot-size: 8px;
 // popups
 $popup-alpha: 0.5;
 $popup-background-color: #000;
+
+// Empty
+$gray-6: #969799;
+$font-size-md: 14px;
+$line-height-md: 20px;
+
+// $empty-padding: @padding-xl 0;
+$empty-padding: 32px;
+$empty-image-size: 160px;
+// $empty-description-margin-top: @padding-md;
+$empty-description-margin-top: 16px;
+$empty-description-padding: 0 60px;
+$empty-description-color: $gray-6;
+$empty-description-font-size: $font-size-md;
+$empty-description-line-height: $line-height-md;
+$empty-bottom-margin-top: 24px;
+

From 76ea9d67178d895b54cac180e724e46f17e4535b Mon Sep 17 00:00:00 2001
From: wujingquan <i@wujingquan.com>
Date: Wed, 23 Dec 2020 23:33:04 +0800
Subject: [PATCH 2/3] empty complete.

---
 src/components/Empty/helper.tsx        | 53 --------------------------
 src/components/Empty/index.stories.tsx |  8 ++--
 src/components/Empty/index.tsx         |  7 +---
 src/styles/variables.scss              | 12 +++---
 4 files changed, 13 insertions(+), 67 deletions(-)
 delete mode 100644 src/components/Empty/helper.tsx

diff --git a/src/components/Empty/helper.tsx b/src/components/Empty/helper.tsx
deleted file mode 100644
index 1ab60a5aa..000000000
--- a/src/components/Empty/helper.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// import React, { ReactElement } from 'react';
-
-// import SpinnerLoading from '../../assets/icons/loaders/Spinner';
-// import CircularLoading from '../../assets/icons/loaders/Circular';
-
-// import { LoadingIconProps } from './types';
-
-// export const renderLoadingIcon = ({
-//   className,
-//   loadingType = 'circular',
-//   loadingText,
-//   loadingSize
-// }: LoadingIconProps): ReactElement => {
-//   return (
-//     <React.Fragment>
-//       {loadingType === 'spinner' ? (
-//         <SpinnerLoading loadingSize={loadingSize} className={className} />
-//       ) : (
-//         <CircularLoading loadingSize={loadingSize} className={className} />
-//       )}
-//       {loadingText && <span>{loadingText}</span>}
-//     </React.Fragment>
-//   );
-// };
-
-// export const getContrastTextColor = (colorHex: string): string => {
-//   let r, g, b;
-//   if (colorHex.length !== 6 && colorHex.slice(0, 3) !== 'rgb') {
-//     return 'black';
-//   } // return black if color is not supplied
-//   else if (colorHex.length === 6) {
-//     r = parseInt(colorHex[0] + colorHex[1], 16);
-//     g = parseInt(colorHex[2] + colorHex[3], 16);
-//     b = parseInt(colorHex[4] + colorHex[5], 16);
-//   } else if (colorHex.length !== 6 && colorHex.slice(0, 3) === 'rgb') {
-//     const startIndex = colorHex.indexOf('(');
-//     const endIndex = colorHex.indexOf(')');
-//     const rgb = colorHex
-//       .slice(startIndex + 1, endIndex - startIndex)
-//       .split(',');
-//     r = rgb[0];
-//     g = rgb[1];
-//     b = rgb[2];
-//   }
-//   const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-//   return brightness > 125 ? 'black' : 'white';
-// };
-
-// export const colorType = (colorHex: string): string => {
-//   if (colorHex.length !== 6 && colorHex.slice(0, 3) === 'rgb') return colorHex;
-//   const result = '#' + colorHex;
-//   return result;
-// };
diff --git a/src/components/Empty/index.stories.tsx b/src/components/Empty/index.stories.tsx
index 4306190f8..af730e595 100644
--- a/src/components/Empty/index.stories.tsx
+++ b/src/components/Empty/index.stories.tsx
@@ -26,28 +26,28 @@ export const ImageType = () => {
   return (
     <div className='storybook__container empty'>
       <Button
-        click={() => {
+        onClick={() => {
           setShowType('error');
         }}
         text='Error'
         type='primary'
       />
       <Button
-        click={() => {
+        onClick={() => {
           setShowType('network');
         }}
         text='Network'
         type='info'
       />
       <Button
-        click={() => {
+        onClick={() => {
           setShowType('search');
         }}
         text='Search'
         type='warning'
       />
       <Button
-        click={() => {
+        onClick={() => {
           setShowType('custom');
         }}
         text='Custom'
diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx
index 9774d9576..95238bfeb 100644
--- a/src/components/Empty/index.tsx
+++ b/src/components/Empty/index.tsx
@@ -10,16 +10,13 @@ import { Network } from './Network';
 const baseClass = 'vant-button';
 const PRESET_IMAGES = ['error', 'search', 'default'];
 
+// TODO: custom imageSize
+// TODO: bottom & image & description solts
 export default function Empty({
-  imageSize,
   description,
   image = 'default',
   bottom
 }: Props) {
-  console.log(imageSize);
-  console.log(description);
-  console.log(image);
-
   const containerProps = {
     className: classnames(`${baseClass}`, []),
     style: {}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 774599e84..e7e201263 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,3 +1,5 @@
+@import './spacing.scss';
+
 // loaders
 $loader-size: 20px;
 $loader-animation-duration: 2s;
@@ -18,18 +20,18 @@ $popup-alpha: 0.5;
 $popup-background-color: #000;
 
 // Empty
+$padding-base: 4px;
+$padding-md: $padding-base * 4;
+$padding-xl: $padding-base * 8;
 $gray-6: #969799;
 $font-size-md: 14px;
 $line-height-md: 20px;
 
-// $empty-padding: @padding-xl 0;
-$empty-padding: 32px;
+$empty-padding: $padding-xl 0;
 $empty-image-size: 160px;
-// $empty-description-margin-top: @padding-md;
-$empty-description-margin-top: 16px;
+$empty-description-margin-top: $padding-md;
 $empty-description-padding: 0 60px;
 $empty-description-color: $gray-6;
 $empty-description-font-size: $font-size-md;
 $empty-description-line-height: $line-height-md;
 $empty-bottom-margin-top: 24px;
-

From 9551db8663e217b8db20d3e37a277ec4f9613a30 Mon Sep 17 00:00:00 2001
From: wujingquan <i@wujingquan.com>
Date: Sat, 26 Dec 2020 00:03:18 +0800
Subject: [PATCH 3/3] fixed some requested changes.

---
 README.md                              |  2 +-
 package.json                           |  2 +-
 src/components/Empty/index.scss        |  8 +---
 src/components/Empty/index.stories.tsx | 60 +++++++++++++-------------
 src/components/Empty/index.tsx         |  7 +--
 src/styles/stories.scss                |  4 ++
 6 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index f6dda5924..c4090afd7 100644
--- a/README.md
+++ b/README.md
@@ -89,7 +89,7 @@ const App = () => {
 - [ ] Collapse
 - [ ] CountDown
 - [ ] Divider
-- [ ] Empty
+- [x] Empty
 - [ ] ImagePreview
 - [ ] Lazyload
 - [ ] List
diff --git a/package.json b/package.json
index b4e277f31..c03c92a7d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant-react",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Lightweight Mobile UI Components built in React &amp; Typescript, inspired by Vant: https://youzan.github.io/vant",
   "author": "mxdi9i7",
   "license": "MIT",
diff --git a/src/components/Empty/index.scss b/src/components/Empty/index.scss
index 7bb17674c..5c9f12ef4 100644
--- a/src/components/Empty/index.scss
+++ b/src/components/Empty/index.scss
@@ -1,11 +1,7 @@
-// @import '../../styles/colors.scss';
-// @import '../../styles/spacing.scss';
-// @import '../../styles/typography.scss';
-// @import '../../styles/opacity.scss';
 @import '../../styles/variables.scss';
+@import '../../styles/typography.scss';
 
-$baseClass: 'vant-button';
-
+$baseClass: 'vant-empty';
 
 .#{$baseClass} {
   display: flex;
diff --git a/src/components/Empty/index.stories.tsx b/src/components/Empty/index.stories.tsx
index af730e595..f07e2c611 100644
--- a/src/components/Empty/index.stories.tsx
+++ b/src/components/Empty/index.stories.tsx
@@ -25,34 +25,36 @@ export const ImageType = () => {
 
   return (
     <div className='storybook__container empty'>
-      <Button
-        onClick={() => {
-          setShowType('error');
-        }}
-        text='Error'
-        type='primary'
-      />
-      <Button
-        onClick={() => {
-          setShowType('network');
-        }}
-        text='Network'
-        type='info'
-      />
-      <Button
-        onClick={() => {
-          setShowType('search');
-        }}
-        text='Search'
-        type='warning'
-      />
-      <Button
-        onClick={() => {
-          setShowType('custom');
-        }}
-        text='Custom'
-        type='danger'
-      />
+      <div>
+        <Button
+          onClick={() => {
+            setShowType('error');
+          }}
+          text='Error'
+          type='primary'
+        />
+        <Button
+          onClick={() => {
+            setShowType('network');
+          }}
+          text='Network'
+          type='info'
+        />
+        <Button
+          onClick={() => {
+            setShowType('search');
+          }}
+          text='Search'
+          type='warning'
+        />
+        <Button
+          onClick={() => {
+            setShowType('custom');
+          }}
+          text='Custom'
+          type='danger'
+        />
+      </div>
       {showType === 'error' && (
         <Empty image='error' description='description' />
       )}
@@ -78,7 +80,7 @@ export const CustomImage = () => (
   </div>
 );
 
-export const BottomContent = () => (
+export const CustomBottomContent = () => (
   <div className='storybook__container empty'>
     <Empty
       bottom={
diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx
index 95238bfeb..f0ce3086d 100644
--- a/src/components/Empty/index.tsx
+++ b/src/components/Empty/index.tsx
@@ -1,17 +1,14 @@
 import React from 'react';
-
 import classnames from '../../utils/classNames';
-
 import { Props } from './types';
-
 import './index.scss';
 import { Network } from './Network';
 
-const baseClass = 'vant-button';
+const baseClass = 'vant-empty';
 const PRESET_IMAGES = ['error', 'search', 'default'];
 
 // TODO: custom imageSize
-// TODO: bottom & image & description solts
+// TODO: bottom & image & description slots
 export default function Empty({
   description,
   image = 'default',
diff --git a/src/styles/stories.scss b/src/styles/stories.scss
index 31378b7a4..30d7316ea 100644
--- a/src/styles/stories.scss
+++ b/src/styles/stories.scss
@@ -62,6 +62,10 @@ body {
       height: 200px;
     }
   }
+
+  &.empty {
+    flex-direction: column;
+  }
 }
 .slider-container {
   display: flex;