Vue 3 Ant Design Buttons Example

<template>
  <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>
</template>

<template>
 <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
  <a-button type="primary" ghost>Primary</a-button>
  <a-button ghost>Default</a-button>
  <a-button type="dashed" ghost>Dashed</a-button>
  <a-button type="primary" danger ghost>Danger</a-button>
 </div>
</template>

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

 <div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
  <a-button ghost>Ghost</a-button>
  <a-button ghost disabled>Ghost(disabled)</a-button>
 </div>
</template>

<template>
 <a-button type="primary" shape="circle">
  <template #icon><SearchOutlined /></template>
 </a-button>
 <a-button type="primary" shape="circle">A</a-button>
 <a-button type="primary">
  <template #icon><SearchOutlined /></template>
  Search
 </a-button>
 <a-button shape="circle">
  <template #icon><SearchOutlined /></template>
 </a-button>
 <a-button>
  <template #icon><SearchOutlined /></template>
  Search
 </a-button>
 <a-button shape="circle">
  <template #icon><SearchOutlined /></template>
 </a-button>
 <a-button>
  <template #icon><SearchOutlined /></template>
  Search
 </a-button>
 <a-button type="dashed" shape="circle">
  <template #icon><SearchOutlined /></template>
 </a-button>
 <a-button type="dashed">
  <template #icon><SearchOutlined /></template>
  Search
 </a-button>
 <a-button href="https://www.google.com">
  <template #icon><SearchOutlined /></template>
 </a-button>
 <br />
 <br />
 <a-tooltip title="search">
  <a-button type="primary" shape="circle" size="large">
   <template #icon><SearchOutlined /></template>
  </a-button>
 </a-tooltip>
 <a-button type="primary" shape="circle" size="large">A</a-button>
 <a-button type="primary" size="large">
  <template #icon><SearchOutlined /></template>
  Search
 </a-button>
 <a-tooltip title="search">
  <a-button shape="circle" size="large">
   <template #icon><SearchOutlined /></template>
  </a-button>
 </a-tooltip>
 <a-button size="large">
  <template #icon><SearchOutlined /></template>
  Search
 </a-button>
 <br />
 <a-tooltip title="search">
  <a-button shape="circle" size="large">
   <template #icon><SearchOutlined /></template>
  </a-button>
 </a-tooltip>
 <a-button size="large">
  <template #icon><SearchOutlined /></template>
  Search
 </a-button>
 <a-tooltip title="search">
  <a-button type="dashed" shape="circle" size="large">
   <template #icon><SearchOutlined /></template>
  </a-button>
 </a-tooltip>
 <a-button type="dashed" size="large">
  <template #icon><SearchOutlined /></template>
  Search
 </a-button>
 <a-button size="large" href="https://www.google.com">
  <template #icon><SearchOutlined /></template>
 </a-button>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
 components: {
  SearchOutlined,
 },
};
</script>

<template>
 <a-radio-group v-model:value="size">
  <a-radio-button value="large">Large</a-radio-button>
  <a-radio-button value="default">Default</a-radio-button>
  <a-radio-button value="small">Small</a-radio-button>
 </a-radio-group>
 <br />
 <br />
 <a-button type="primary" :size="size">Primary</a-button>
 <a-button :size="size">Normal</a-button>
 <a-button type="dashed" :size="size">Dashed</a-button>
 <a-button danger :size="size">Danger</a-button>
 <a-button type="link" :size="size">Link</a-button>
 <br />
 <a-button type="primary" :size="size">
  <template #icon>
   <DownloadOutlined />
  </template>
 </a-button>
 <a-button type="primary" shape="circle" :size="size">
  <template #icon>
   <DownloadOutlined />
  </template>
 </a-button>
 <a-button type="primary" shape="round" :size="size">
  <template #icon>
   <DownloadOutlined />
  </template>
  Download
 </a-button>
 <a-button type="primary" shape="round" :size="size">
  <template #icon>
   <DownloadOutlined />
  </template>
 </a-button>
 <a-button type="primary" :size="size">
  <template #icon>
   <DownloadOutlined />
  </template>
  Download
 </a-button>
 <br />
</template>
<script lang="ts">
import { DownloadOutlined } from '@ant-design/icons-vue';
import type { SizeType } from 'ant-design-vue/es/config-provider';
import { defineComponent, ref } from 'vue';
export default defineComponent({
 components: {
  DownloadOutlined,
 },
 setup() {
  return {
   size: ref<SizeType>('large'),
  };
 },
});
</script>