按钮 Button

各种类型、尺寸与状态的按钮。

类型

<script setup>
import { NButton, NSpace } from 'naive-ui'
</script>

<template>
  <n-space>
    <n-button>Default</n-button>
    <n-button type="primary">Primary</n-button>
    <n-button type="info">Info</n-button>
    <n-button type="success">Success</n-button>
    <n-button type="warning">Warning</n-button>
    <n-button type="error">Error</n-button>
  </n-space>
</template>

次要 / 三级 / 虚线

<script setup>
import { NButton, NSpace } from 'naive-ui'
</script>

<template>
  <n-space>
    <n-button secondary type="primary">Secondary</n-button>
    <n-button tertiary type="primary">Tertiary</n-button>
    <n-button dashed type="primary">Dashed</n-button>
    <n-button text type="primary">Text</n-button>
  </n-space>
</template>

尺寸与状态

<script setup>
import { ref } from 'vue'
import { NButton, NSpace, useMessage } from 'naive-ui'

const message = useMessage()
const loading = ref(false)

function handleLoading() {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    message.success('加载完成')
  }, 1500)
}
</script>

<template>
  <n-space align="center">
    <n-button size="tiny" type="primary">Tiny</n-button>
    <n-button size="small" type="primary">Small</n-button>
    <n-button size="medium" type="primary">Medium</n-button>
    <n-button size="large" type="primary">Large</n-button>
  </n-space>

  <n-space style="margin-top: 12px">
    <n-button :loading="loading" type="primary" @click="handleLoading">
      点我加载
    </n-button>
    <n-button disabled>禁用</n-button>
    <n-button round type="primary">圆角</n-button>
    <n-button circle type="primary">圆</n-button>
  </n-space>
</template>