logo
简体中文

导航菜单

文档
Vue

Button

简介

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

组件特性：

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

案例

<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 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="ghost">幽灵按钮</Button>
</template>

Props

block

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

<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 wide>宽按钮</Button>
</template>

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

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

disabled

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

<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 loading>加载中</Button>
</template>

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

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

href

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

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

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

<template>
    <Button variant="link" href="/about">链接样式</Button>
</template>

loading

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

<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 loading>加载中</Button>
</template>

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

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

shape

按钮形状，支持 circle（圆形）和 square（方形）。

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

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

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

size

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

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

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

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

<template>
    <Button variant="link" href="/about">链接样式</Button>
</template>

type

按钮类型，支持 button、submit、reset。

<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 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="ghost">幽灵按钮</Button>
</template>

variant

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

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

wide

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

<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 wide>宽按钮</Button>
</template>

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

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

Slots

default

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

<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 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="ghost">幽灵按钮</Button>
</template>

icon-left

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

<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

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

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

搜索