logo
简体中文
导航

Button

基础按钮

最基本的按钮使用方式，展示不同的样式变体。

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

按钮状态

按钮支持不同的状态展示。

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

按钮尺寸

提供多种尺寸以适应不同的场景需求。

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

按钮形状

按钮支持不同的形状样式。

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

带图标的按钮

按钮可以配合图标一起使用。

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

宽度变体

按钮支持不同的宽度设置。

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

<Button wide>宽按钮</Button>

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

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

语义化变体

提供多种语义化的颜色变体。

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