logo
English

导航菜单

Documents

Button

Introduction

The Button component is used to trigger an immediate action, such as form submission, opening dialogs, etc. It supports multiple style variants, sizes, and states to meet different scenario requirements.

Component Features:

  • Supports multiple style variants (primary, secondary, accent, etc.)
  • Supports multiple sizes (lg, md, sm, xs)
  • Supports different shapes (default, circle, square)
  • Supports loading and disabled states
  • Supports icon slots (left and right)
  • Supports link form (href attribute)
  • Supports gradient effects
  • Responsive design that adapts to different screen sizes

Props

block

Whether the button is block-level display. When set to true, the button fills the container width.

---



import { Button } from "@coffic/cosy-ui";
---

<Button wide>宽按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button block>块级按钮</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button wide>宽按钮</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button block>块级按钮</Button>
</template>

class

Custom CSS class name for overriding default styles.

---



import { Button } from "@coffic/cosy-ui";
---

<Button>默认样式</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button class="cosy:btn-primary cosy:btn-lg">自定义样式</Button>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button>默认样式</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button class="cosy:btn-primary cosy:btn-lg">自定义样式</Button>
</template>

disabled

Whether the button is disabled. When set to true, the button cannot be clicked.

---



import { Button } from "@coffic/cosy-ui";
---

<Button>正常状态</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button disabled>禁用状态</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button loading>加载状态</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button>正常</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button disabled>禁用</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button loading>加载中</Button>
</template>

formmethod

Form submission method, supporting special values like dialog.

---



import { Button } from "@coffic/cosy-ui";
---

<Button formmethod="post">默认表单方法</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button formmethod="dialog">对话框表单方法</Button>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button formmethod="post">默认表单方法</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button formmethod="dialog">对话框表单方法</Button>
</template>

href

Link address. When set, the button becomes a link form.

---



import { Button } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
    <Button href="#" variant="primary">基础链接</Button>
    <Button href="#" variant="secondary">次要链接</Button>
    <Button href="#" variant="accent">强调链接</Button>
</div>

---



import { Button } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
    <Button href="https://example.com" variant="primary" target="_blank"
        >打开外部链接</Button
    >
    <Button href="https://github.com" variant="success" target="_blank"
        >GitHub 链接</Button
    >
</div>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button href="/docs">内部链接</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button href="https://github.com" target="_blank">外部链接</Button>
</template>

loading

Whether to show loading state. When set to true, displays loading animation.

---



import { Button } from "@coffic/cosy-ui";
---

<Button>正常状态</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button disabled>禁用状态</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button loading>加载状态</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button>正常</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button disabled>禁用</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button loading>加载中</Button>
</template>

onClick

Click event handler function, supporting inline JavaScript code.

点击次数: 0

---



import { Button } from "@coffic/cosy-ui";
---

<Button>默认按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button onClick="alert('按钮被点击了！')">点击弹出提示</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
import { ref } from "vue";

const count = ref(0);
const handleClick = () => {
	count.value++;
	console.log("Button clicked!", count.value);
};
</script>

<template>
    <div class="cosy:flex cosy:flex-col cosy:gap-4">
        <Button @click="handleClick">点击我 ({{ count }})</Button>
        <p>点击次数: {{ count }}</p>
    </div>
</template>
<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';

const handleAlert = () => {
    alert('按钮被点击了！');
};
</script>
<template>
    <Button @click="handleAlert">点击弹出提示</Button>
</template>

shape

Button shape, supporting circle (circular) and square (square).

---



import { Button } from "@coffic/cosy-ui";
---

<Button shape="circle">圆</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button>默认</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button shape="square">方</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button shape="circle">圆形</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Button variant="primary" size="lg">默认形状按钮</Button>
    </div>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button shape="square">方形</Button>
</template>

size

Button size, supporting lg, md, sm, xs four sizes.

---



import { Button } from "@coffic/cosy-ui";
---

<Button size="xs">超小按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button size="sm">小型按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button size="md">中型按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button size="lg">大型按钮</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button size="xs">XS</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button size="sm">SM</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button size="md">MD</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button size="lg">LG</Button>
</template>

target

Link target, supporting _self, _blank, _parent, _top.

---



import { Button } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
    <Button href="#" variant="primary">基础链接</Button>
    <Button href="#" variant="secondary">次要链接</Button>
    <Button href="#" variant="accent">强调链接</Button>
</div>

---



import { Button } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
    <Button href="https://example.com" variant="primary" target="_blank"
        >打开外部链接</Button
    >
    <Button href="https://github.com" variant="success" target="_blank"
        >GitHub 链接</Button
    >
</div>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button href="/docs">内部链接</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button href="https://github.com" target="_blank">外部链接</Button>
</template>

type

Button type, supporting button, submit, reset.

---



import { Button } from "@coffic/cosy-ui";
---

<Button type="button">Button 类型</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button type="submit">Submit 类型</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button type="reset">Reset 类型</Button>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button type="button">Button 类型</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button type="submit">Submit 类型</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button type="reset">Reset 类型</Button>
</template>

variant

Button style variant, supporting multiple preset styles and gradient effects.

---
import { Button } from '@coffic/cosy-ui';
---

<Button variant="primary">主要按钮</Button>


---
import { Button } from '@coffic/cosy-ui';
---

<Button variant="secondary">次要按钮</Button>


---
import { Button } from '@coffic/cosy-ui';
---

<Button variant="accent">强调按钮</Button>


---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="info">信息按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="success">成功按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="warning">警告按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="error">错误按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="ghost">幽灵按钮</Button>

---



import { Button } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
    <Button href="#" variant="primary">基础链接</Button>
    <Button href="#" variant="secondary">次要链接</Button>
    <Button href="#" variant="accent">强调链接</Button>
</div>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="outline">描边按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="neutral">中性按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-sky">天空渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-watermelon">西瓜渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-lemon">柠檬渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-grape">葡萄渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-mango">芒果渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-forest">森林渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-ocean">海洋渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-sunset">日落渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-flower">花瓣渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-pitaya">火龙果渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-banana">香蕉渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-blueberry">蓝莓渐变按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button variant="gradient-kiwi">奇异果渐变按钮</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="primary">Primary</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="secondary">次要按钮</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="accent">强调按钮</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="info">Info</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="success">Success</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="warning">Warning</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="error">Error</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="ghost">幽灵按钮</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="link">Link</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="outline">Outline</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="neutral">Neutral</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="gradient-sky">Sky Gradient</Button>
</template>
<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="gradient-watermelon">Watermelon Gradient</Button>
</template>
<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button variant="gradient-lemon">Lemon Gradient</Button>
</template>
<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-grape">Grape Gradient</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-mango">Mango Gradient</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-forest">Forest Gradient</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-ocean">Ocean Gradient</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-sunset">Sunset Gradient</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-flower">Flower Gradient</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-pitaya">Pitaya Gradient</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-banana">Banana Gradient</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-blueberry">Blueberry Gradient</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button variant="gradient-kiwi">Kiwi Gradient</Button>
</template>

wide

Whether the button is wide. When set to true, the button width increases.

---



import { Button } from "@coffic/cosy-ui";
---

<Button wide>宽按钮</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button block>块级按钮</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button wide>宽按钮</Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button block>块级按钮</Button>
</template>

Slots

default

Button content slot, used for placing button text content.

---



import { Button } from "@coffic/cosy-ui";
---

<Button>按钮文本</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button>
    <span style="font-weight: bold;">粗体文本</span>
</Button>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button>按钮文本</Button>
</template>

<script setup lang="ts">
import { Button } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Button>
        <span style="font-weight: bold">粗体文本</span>
    </Button>
</template>

icon-left

Left icon slot, displayed to the left of button content.

---



import { Button } from "@coffic/cosy-ui";
---

<Button>
  <span slot="icon-left">←</span>
  左侧图标按钮
</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button>
  右侧图标按钮
  <span slot="icon-right">→</span>
</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button>
  <span slot="icon-left">←</span>
  两侧图标按钮
  <span slot="icon-right">→</span>
</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button>
        <template #icon-left>📱</template>
        左侧图标
    </Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button>
        右侧图标
        <template #icon-right>🚀</template>
    </Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button>
        <template #icon-left>⭐</template>
        双图标
        <template #icon-right>💫</template>
    </Button>
</template>

icon-right

Right icon slot, displayed to the right of button content.

---



import { Button } from "@coffic/cosy-ui";
---

<Button>
  <span slot="icon-left">←</span>
  左侧图标按钮
</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button>
  右侧图标按钮
  <span slot="icon-right">→</span>
</Button>

---



import { Button } from "@coffic/cosy-ui";
---

<Button>
  <span slot="icon-left">←</span>
  两侧图标按钮
  <span slot="icon-right">→</span>
</Button>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button>
        <template #icon-left>📱</template>
        左侧图标
    </Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button>
        右侧图标
        <template #icon-right>🚀</template>
    </Button>
</template>

<script setup lang="ts">
import { Button } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Button>
        <template #icon-left>⭐</template>
        双图标
        <template #icon-right>💫</template>
    </Button>
</template>

搜索