logo
English

导航菜单

Documents
Vue

Button

Introduction

The Button component is used to trigger an immediate action, such as form submission, opening dialogs, etc. It supports various 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

Example

<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

Whether it’s a block-level display, when set to true, the button fills the container width.

<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

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

<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

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

<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

Whether to show loading state, when set to true, shows loading animation.

<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

Button shape, supports circle and 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

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

<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, supports _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 type, supports 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

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

<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

Whether it’s a wide button, when set to true, the button width increases.

<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

Button content slot, used to place button text content.

<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

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

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

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

搜索