Button

To trigger an operation.

When To Use

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

In Ant Design we provide 5 types of button.

• Primary button: indicate the main action, one primary button at most in one section.
• Default button: indicate a series of actions without priority.
• Dashed button: used for adding action commonly.
• Text button: used for the most secondary action.
• Link button: used for external links.

And 4 other properties additionally.

• danger: used for actions of risk, like deletion or authorization.
• ghost: used in situations with complex background, home pages usually.
• disabled: when actions are not available.
• loading: add loading spinner in button, avoiding multiple submits too.

Examples

Type

<template>
  <a-space wrap>
    <a-button type="primary">Primary Button</a-button>
    <a-button>Default Button</a-button>
    <a-button type="dashed">Dashed Button</a-button>
    <a-button type="text">Text Button</a-button>
    <a-button type="link">Link Button</a-button>
  </a-space>
</template>

Size

<template>
  <a-space wrap>
    <a-button type="primary" size="large">Large</a-button>
    <a-button type="primary">Default</a-button>
    <a-button type="primary" size="small">Small</a-button>
  </a-space>
</template>

Disabled

<template>
  <a-space wrap>
    <a-button type="primary" disabled>Primary(disabled)</a-button>
    <a-button disabled>Default(disabled)</a-button>
    <a-button type="dashed" disabled>Dashed(disabled)</a-button>
    <a-button type="text" disabled>Text(disabled)</a-button>
    <a-button type="link" disabled>Link(disabled)</a-button>
  </a-space>
</template>

Loading

<template>
  <a-space wrap>
    <a-button type="primary" loading>Loading</a-button>
    <a-button type="primary" size="small" loading>Loading</a-button>
    <a-button type="primary" :loading="loading" @click="enterLoading">
      Click me!
    </a-button>
  </a-space>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)

const enterLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

API

Button

Property	Description	Type	Default	Version
disabled	disabled state of button	boolean	false
ghost	make background transparent and invert text and border colors	boolean	false
href	redirect url of link button	string	-
htmlType	set the original html type of button	string	button
icon	set the icon component of button	VNode | slot	-
loading	set the loading status of button	boolean |	false
shape	can be set button shape	default | circle | round	default
size	set the size of button	large | middle | small	middle
target	same as target attribute of a, works when href is specified	string	-
type	can be set to primary dashed link text default	string	default
block	option to fit button width to its parent width	boolean	false
danger	set the danger status of button	boolean	false

Events

Events Name	Description	Arguments	Version
click	set the handler to handle click event	(event) => void	-