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>

class

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

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

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <Button>默认按钮</Button>
  <Button variant="primary">主要按钮</Button>
  <Button variant="secondary">次要按钮</Button>
  <Button variant="accent">强调按钮</Button>
  <Button variant="info">信息按钮</Button>
  <Button variant="success">成功按钮</Button>
  <Button variant="warning">警告按钮</Button>
  <Button variant="error">错误按钮</Button>
  <Button variant="ghost">幽灵按钮</Button>
  <Button variant="link">链接按钮</Button>
  <Button variant="outline">轮廓按钮</Button>
  <Button variant="neutral">中性按钮</Button>
</div>

disabled

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

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

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <Button>正常状态</Button>
  <Button disabled>禁用状态</Button>
  <Button loading>加载状态</Button>
</div>

formmethod

表单提交方法，支持 dialog 等特殊值。

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

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <Button>默认按钮</Button>
  <Button variant="primary">主要按钮</Button>
  <Button variant="secondary">次要按钮</Button>
  <Button variant="accent">强调按钮</Button>
  <Button variant="info">信息按钮</Button>
  <Button variant="success">成功按钮</Button>
  <Button variant="warning">警告按钮</Button>
  <Button variant="error">错误按钮</Button>
  <Button variant="ghost">幽灵按钮</Button>
  <Button variant="link">链接按钮</Button>
  <Button variant="outline">轮廓按钮</Button>
  <Button variant="neutral">中性按钮</Button>
</div>

href

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

---
import { ButtonLink as CoreButtonLink } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <CoreButtonLink href="#" variant="primary">内部链接按钮</CoreButtonLink>
  <CoreButtonLink href="#" variant="secondary">次要链接</CoreButtonLink>
  <CoreButtonLink href="#" variant="outline">描边链接</CoreButtonLink>
</div>

---
import { ButtonLinkExternal as CoreButtonLinkExternal } from '@coffic/cosy-ui';
---

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

loading

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

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

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <Button>正常状态</Button>
  <Button disabled>禁用状态</Button>
  <Button loading>加载状态</Button>
</div>

onClick

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

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

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <Button>默认按钮</Button>
  <Button variant="primary">主要按钮</Button>
  <Button variant="secondary">次要按钮</Button>
  <Button variant="accent">强调按钮</Button>
  <Button variant="info">信息按钮</Button>
  <Button variant="success">成功按钮</Button>
  <Button variant="warning">警告按钮</Button>
  <Button variant="error">错误按钮</Button>
  <Button variant="ghost">幽灵按钮</Button>
  <Button variant="link">链接按钮</Button>
  <Button variant="outline">轮廓按钮</Button>
  <Button variant="neutral">中性按钮</Button>
</div>

shape

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

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

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

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

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

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

<Button>默认</Button>

size

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

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

<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;">
  <Button size="xs">超小按钮</Button>
  <Button size="sm">小型按钮</Button>
  <Button size="md">中型按钮</Button>
  <Button size="lg">大型按钮</Button>
</div>

<div
  style="margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
  <Button size="lg" wide>宽按钮</Button>
  <Button block>块级按钮</Button>
</div>

target

链接目标，支持 _self、_blank、_parent、_top。

---
import { ButtonLink as CoreButtonLink } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <CoreButtonLink href="#" variant="primary">内部链接按钮</CoreButtonLink>
  <CoreButtonLink href="#" variant="secondary">次要链接</CoreButtonLink>
  <CoreButtonLink href="#" variant="outline">描边链接</CoreButtonLink>
</div>

---
import { ButtonLinkExternal as CoreButtonLinkExternal } from '@coffic/cosy-ui';
---

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

type

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

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

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <Button>默认按钮</Button>
  <Button variant="primary">主要按钮</Button>
  <Button variant="secondary">次要按钮</Button>
  <Button variant="accent">强调按钮</Button>
  <Button variant="info">信息按钮</Button>
  <Button variant="success">成功按钮</Button>
  <Button variant="warning">警告按钮</Button>
  <Button variant="error">错误按钮</Button>
  <Button variant="ghost">幽灵按钮</Button>
  <Button variant="link">链接按钮</Button>
  <Button variant="outline">轮廓按钮</Button>
  <Button variant="neutral">中性按钮</Button>
</div>

variant

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

---
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 { ButtonLink as CoreButtonLink } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <CoreButtonLink href="#" variant="primary">内部链接按钮</CoreButtonLink>
  <CoreButtonLink href="#" variant="secondary">次要链接</CoreButtonLink>
  <CoreButtonLink href="#" variant="outline">描边链接</CoreButtonLink>
</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>

wide

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

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

<Button wide>宽按钮</Button>

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

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

Slots

default

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

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

<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
  <Button>默认按钮</Button>
  <Button variant="primary">主要按钮</Button>
  <Button variant="secondary">次要按钮</Button>
  <Button variant="accent">强调按钮</Button>
  <Button variant="info">信息按钮</Button>
  <Button variant="success">成功按钮</Button>
  <Button variant="warning">警告按钮</Button>
  <Button variant="error">错误按钮</Button>
  <Button variant="ghost">幽灵按钮</Button>
  <Button variant="link">链接按钮</Button>
  <Button variant="outline">轮廓按钮</Button>
  <Button variant="neutral">中性按钮</Button>
</div>

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>

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>

搜索