logo
English
导航

Button

Basic Buttons

The most basic button usage, displaying different style variants.

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

<div class="cosy:flex cosy:flex-wrap cosy:gap-4">
  <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>

Button States

Buttons support different state displays.

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

<div class="cosy:flex cosy:flex-wrap cosy:gap-4">
  <Button>正常状态</Button>
  <Button disabled>禁用状态</Button>
  <Button loading>加载状态</Button>
</div>

Button Sizes

Provides multiple sizes to adapt to different scenario requirements.

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

<div class="cosy:flex cosy:flex-wrap cosy:items-center cosy:gap-4">
  <Button size="xs">超小按钮</Button>
  <Button size="sm">小型按钮</Button>
  <Button size="md">中型按钮</Button>
  <Button size="lg">大型按钮</Button>
</div>

<div class="cosy:mt-4 cosy:flex cosy:flex-col cosy:items-center cosy:gap-2">
  <Button size="lg" wide>宽按钮</Button>
  <Button block>块级按钮</Button>
</div>

Button Shapes

Buttons support different shape styles.

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

Buttons with Icons

Buttons can be used together with icons.

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

Width Variants

Buttons support different width settings.

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

<Button wide>宽按钮</Button>

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

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

Semantic Variants

Provides multiple semantic color variants.

---
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 class="cosy:flex cosy:flex-wrap cosy:gap-4">
  <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>

Buttons can be used as links, supporting internal navigation and external links.

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

<div class="cosy:flex cosy:flex-wrap cosy:gap-4">
  <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 class="cosy:flex cosy:flex-wrap cosy:gap-4">
  <CoreButtonLinkExternal href="https://example.com" variant="primary"
    >打开外部链接</CoreButtonLinkExternal
  >
  <CoreButtonLinkExternal href="https://github.com" variant="success"
    >GitHub 链接</CoreButtonLinkExternal
  >
</div>