naive-ui/demo/documentation/components/button/enUS/debug.md

# Debug
List all buttons here for debug usage.
```html
<n-config-consumer transparent>
  <template v-slot="{ theme }">
    <div
      class="debug-zone"
      :class="{
        [`n-${theme}-theme`]: true
      }"
    >
      <n-button
        type="default"
        round
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Default
      </n-button>
      <n-button
        type="primary"
        disabled
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Primary
      </n-button>
      <n-button
        type="info"
        icon-position="right"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Info
      </n-button>
      <n-button
        type="warning"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Warning
      </n-button>
      <n-button
        type="success"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Success
      </n-button>
      <n-button
        type="error"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Error
      </n-button>
      <n-button
        type="default"
        ghost
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Default
      </n-button>
      <n-button
        type="primary"
        ghost
        round
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Primary
      </n-button>
      <n-button
        type="info"
        ghost
        disabled
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Info
      </n-button>
      <n-button
        type="warning"
        ghost
        icon-position="right"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Warning
      </n-button>
      <n-button
        type="success"
        ghost
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Success
      </n-button>
      <n-button
        type="error"
        ghost
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Error
      </n-button>
      <n-button
        type="default"
        loading
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Default
      </n-button>
      <n-button
        type="primary"
        loading
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Primary
      </n-button>
      <n-button
        type="info"
        loading
        round
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Info
      </n-button>
      <n-button
        type="warning"
        loading
        disabled
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Warning
      </n-button>
      <n-button
        type="success"
        loading
        icon-position="right"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Success
      </n-button>
      <n-button
        type="error"
        loading
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Error
      </n-button>
      <n-button
        type="default"
        ghost
        loading
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Default
      </n-button>
      <n-button
        type="primary"
        ghost
        loading
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Primary
      </n-button>
      <n-button
        type="info"
        ghost
        loading
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Info
      </n-button>
      <n-button
        type="warning"
        ghost
        loading
        round
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Warning
      </n-button>
      <n-button
        type="success"
        ghost
        loading
        disabled
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Success
      </n-button>
      <n-button
        type="error"
        ghost
        loading
        icon-position="right"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Error
      </n-button>
      <n-button
        type="default"
        round
        block
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Default
      </n-button>
      <n-button
        type="primary"
        disabled
        block
        size="small"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Primary
      </n-button>
      <n-button
        type="info"
        icon-position="right"
        block
        size="large"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Info
      </n-button>
      <n-button
        type="warning"
        block
        ghost
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Warning
      </n-button>
      <n-button
        type="success"
        block
        loading
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Success
      </n-button>
      <n-button
        type="error"
        block
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Error
      </n-button>
      <n-button
        type="primary"
        disabled
        circle
        size="small"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Primary
      </n-button>
      <n-button
        type="info"
        icon-position="right"
        circle
        size="large"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Info
      </n-button>
      <n-button
        type="warning"
        circle
        ghost
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Warning
      </n-button>
      <n-button
        type="success"
        circle
        loading
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Success
      </n-button>
      <n-button
        type="error"
        circle
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Error
      </n-button>
      <n-button
        type="error"
      >
        <template v-slot:icon>
          <md-save />
        </template>
        Error
      </n-button>
      <n-button
        type="error"
        size="large"
      >
        <template v-slot:icon>
          <md-save />
        </template>
      </n-button>
      <n-button
        type="error"
        round
        size="large"
      >
        <template v-slot:icon>
          <md-save />
        </template>
      </n-button>
      <n-button-group>
        <n-button
          type="default"
          round
        >
          <template v-slot:icon>
            <md-save />
          </template>
          Default
        </n-button>
        <n-button
          type="primary"
          disabled
        >
          <template v-slot:icon>
            <md-save />
          </template>
          Primary
        </n-button>
        <n-button
          type="info"
          icon-position="right"
        >
          <template v-slot:icon>
            <md-save />
          </template>
          Info
        </n-button>
        <n-button
          type="warning"
        >
          <template v-slot:icon>
            <md-save />
          </template>
          Warning
        </n-button>
      </n-button-group>
      <n-button-group vertical>
        <n-button
          type="default"
          round
        >
          <template v-slot:icon>
            <md-save />
          </template>
          Default
        </n-button>
        <n-button
          type="primary"
          disabled
        >
          <template v-slot:icon>
            <md-save />
          </template>
          Primary
        </n-button>
        <n-button
          type="info"
          icon-position="right"
        >
          <template v-slot:icon>
            <md-save />
          </template>
          Info
        </n-button>
        <n-button
          type="warning"
        >
          <template v-slot:icon>
            <md-save />
          </template>
          Warning
        </n-button>
      </n-button-group>
    </div>
  </template>
</n-config-consumer>
```
```js
import mdSave from 'naive-ui/lib/icons/md-save'

export default {
  components: {
    mdSave
  }
}
```
```css
.n-button {
  margin-right: 12px;
  margin-bottom: 8px;
}
.debug-zone {
  border-radius: 4px;
  background-color: rgb(48, 48, 48);
  transition: all .3s ease-in-out;
}

.debug-zone.n-light-theme {
  border-radius: 4px;
  background-color: #ececec;
}
```