docs(NAvatar, NButton): Avatar and button page improvements (#885)

* Avatar page

* Button page

src/avatar/demos/enUS/color.demo.md

@@ -1,6 +1,6 @@
 # Color
 
-You can set it to something related to things you want to eat.
+You can set colors related to things you want to eat.
 
 ```html
 <n-avatar

src/avatar/demos/enUS/icon.demo.md

@@ -1,6 +1,6 @@
 # Icon
 
-I like using icon in avatar.
+I like using an icon in an avatar.
 
 ```html
 <n-avatar>

src/avatar/demos/enUS/name-size.demo.md

@@ -1,6 +1,6 @@
 # Content Size
 
-Words' sizing would be auto adjusted in avatar.
+Words are auto adjusted in avatar.
 
 ```html
 <n-space vertical item-style="line-height: 0;">

src/avatar/demos/enUS/size.demo.md

@@ -1,6 +1,6 @@
 # Size
 
-Avatar has `small`, `medium` and `large` size. You could alse custom size by a px number.
+Avatar has `small`, `medium` and `large` size. You could also use a custom size of px number.
 
 ```html
 <n-space align="flex-end">

src/button/demos/enUS/basic.demo.md

@@ -1,6 +1,6 @@
 # Basic
 
-There are `default`, `primary`, `info`, `success`, `warning` and `error` type of button.
+There are `default`, `primary`, `info`, `success`, `warning` and `error` types of button.
 
 ```html
 <n-space>

src/button/demos/enUS/color.demo.md

@@ -1,6 +1,6 @@
 # Custom Color
 
-The two colors look like toadstool.
+These two colors look like a toadstool.
 
 ```html
 <n-space align="center">

src/button/demos/enUS/dashed.demo.md

@@ -1,6 +1,6 @@
 # Dashed
 
-Use `dashed` to show dashed button.
+Use `dashed` to show a dashed button.
 
 ```html
 <n-space>

src/button/demos/enUS/disabled.demo.md

@@ -1,6 +1,6 @@
 # Disabled
 
-Button can be disabled.
+Buttons can be disabled.
 
 ```html
 <n-button disabled> Disabled </n-button>

src/button/demos/enUS/events.demo.md

@@ -1,6 +1,6 @@
 # Events
 
-Handle events on button.
+Handle events of buttons.
 
 ```html
 <n-button @click="handleClick">Click Me</n-button>

src/button/demos/enUS/ghost.demo.md

@@ -1,6 +1,6 @@
 # Ghost
 
-Ghost button has transparent background.
+Ghost buttons have transparent backgrounds.
 
 ```html
 <n-space>

src/button/demos/enUS/group.demo.md

@@ -1,6 +1,6 @@
 # Button Group
 
-Button can be grouped.
+Buttons can be grouped.
 
 ```html
 <n-space>

src/button/demos/enUS/icon-button.demo.md

@@ -1,6 +1,6 @@
-# Use Icon as Button
+# Use Icons as Buttons
 
-Sometimes you may want to use icon as button and customize its size. You can use `text` prop and `font-size` style to set it.
+Sometimes you may want to use an icon as a button and customize its size. You can use the `text` prop and `font-size` style to set it.
 
 ```html
 <n-button text style="font-size: 24px;">

src/button/demos/enUS/icon.demo.md

@@ -1,6 +1,6 @@
 # Icon
 
-Use icon in button.
+Icons can be used in buttons.
 
 ```html
 <n-space>

src/button/demos/enUS/loading.demo.md

@@ -1,6 +1,6 @@
 # Loading
 
-Button has loading status.
+Buttons can have loading states.
 
 ```html
 <n-space>

src/button/demos/enUS/shape.demo.md

@@ -1,6 +1,6 @@
 # Shape
 
-Button has different shapes.
+Buttons can have different shapes.
 
 ```html
 <n-space>

src/button/demos/enUS/size.demo.md

@@ -1,6 +1,6 @@
 # Size
 
-Button can be `tiny`, `small`, `medium` and `large` size.
+Buttons can be `tiny`, `small`, `medium` and `large` in size.
 
 ```html
 <n-space align="baseline">

src/button/demos/enUS/tag.demo.md

@@ -1,6 +1,6 @@
 # Tag
 
-You can render button as different tags. For example `<a />`.
+You can render buttons with different tags. For example `<a />`.
 
 ```html
 <n-button

src/button/demos/enUS/text.demo.md

@@ -1,6 +1,6 @@
 # Text Button
 
-Just look like text.
+It just looks like text.
 
 ```html
 <n-button text>
@@ -9,7 +9,7 @@ Just look like text.
       <train-icon />
     </n-icon>
   </template>
-  The Engine is Still Spiting Smoke
+  The Engine is Still Spitting Smoke
 </n-button>
 ```
 

src/message/demos/enUS/index.demo-entry.md

@@ -90,7 +90,7 @@ placement
 | --- | --- | --- |
 | closable | `boolean` | Whether to show close icon. |
 | content | `string \| (() => VNodeChild)` | Message content. |
-| destory | `() => void` | Message destory method. |
+| destroy | `() => void` | Message destroy method. |
 | icon | `() => VNode` | Message icon. |
 | type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | Message type. |
 | onAfterLeave | `() => void` | Callback after message disappeared. |
@@ -100,7 +100,7 @@ placement
 
 | Name    | Type | Description             |
 | ------- | ---- | ----------------------- |
-| destroy | `()` | Message destory method. |
+| destroy | `()` | Message destroy method. |
 
 ## Q & A
 

src/message/demos/zhCN/index.demo-entry.md

@@ -90,7 +90,7 @@ placement
 | --- | --- | --- |
 | closable | `boolean` | 是否显示 close 图标 |
 | content | `string \| (() => VNodeChild)` | 信息内容 |
-| destory | `() => void` | 销毁信息的方法 |
+| destroy | `() => void` | 销毁信息的方法 |
 | icon | `() => VNode` | 信息图标 |
 | type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | 信息类型 |
 | onAfterLeave | `() => void` | 信息消失动画结束的回调 |