logo
简体中文

导航菜单

文档

Button

简介

Button 组件用于触发一个即时操作，如表单提交、打开对话框等。支持多种样式变体、尺寸和状态，可以满足不同场景的需求。

组件特性：

  • 支持多种样式变体（primary、secondary、accent 等）
  • 支持多种尺寸（lg、md、sm、xs）
  • 支持不同形状（默认、circle、square）
  • 支持加载状态和禁用状态
  • 支持图标插槽（左侧和右侧）
  • 支持链接形式（href 属性）
  • 支持渐变效果
  • 响应式设计，适配不同屏幕尺寸

Props

block

是否为块级显示，设置为 true 时按钮占满容器宽度。

---



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

自定义 CSS 类名，用于覆盖默认样式。

---



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

是否禁用按钮，设置为 true 时按钮不可点击。

---



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

表单提交方法，支持 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

链接地址，设置后按钮变为链接形式。

---



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

是否显示加载状态，设置为 true 时显示加载动画。

---



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

点击事件处理函数，支持内联 JavaScript 代码。

点击次数: 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

按钮形状，支持 circle（圆形）和 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

按钮尺寸，支持 lg、md、sm、xs 四种尺寸。

---



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

链接目标，支持 _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、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

按钮样式变体，支持多种预设样式和渐变效果。

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

是否为宽按钮，设置为 true 时按钮宽度增加。

---



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

按钮内容插槽，用于放置按钮文本内容。

---



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

左侧图标插槽，显示在按钮内容左侧。

---



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

右侧图标插槽，显示在按钮内容右侧。

---



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>

搜索