# Debug List all buttons here for debug usage. ```html <div class="debug-zone" n-light-theme-background-color-hint="#ececec" n-dark-theme-background-color-hint="transparent" > <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> ``` ```js import mdSave from 'naive-ui/packages/icons/md-save' export default { components: { mdSave }, mounted () { console.log(this) } } ``` ```css .n-button { margin-right: 12px; margin-bottom: 8px; } .debug-zone { border-radius: 4px; background-color: transparent; transition: background-color .3s ease-in-out; } .n-light-theme { .debug-zone { border-radius: 4px; background-color: #ececec; } } ```