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>

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>