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>

class

Custom CSS class name for overriding default styles.

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

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

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

Form submission method, supporting special values like 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

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

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

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

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

Click event handler function, supporting inline JavaScript code.

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

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 shape="square">方</Button>

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

<Button>默认</Button>

size

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

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

Link target, supporting _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 type, supporting 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

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

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

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>

Slots

default

Button content slot, used for placing button text content.

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

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>

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>

搜索