K
Kitty UI

Button 按钮

按钮用于触发一个即时操作。

引入

import { Button } from 'kitty-react';

变体样式

 
    <div className="flex flex-wrap gap-4 my-6">
      <Button>默认按钮</Button>
      <Button variant="secondary">次要按钮</Button>
      <Button color="green">成功按钮</Button>
      <Button color="red">危险按钮</Button>
      <Button color="gray">信息按钮</Button>
      <Button variant="outline">描边按钮</Button>
      <Button variant="ghost">幽灵按钮</Button>
    </div>

尺寸

 
<Button size="sm">小按钮</Button>
<Button size="md">中按钮</Button>
<Button size="lg">大按钮</Button>

状态

 
<Button disabled>禁用按钮</Button>
<Button variant="secondary" disabled>禁用按钮</Button>
<Button loading>加载中</Button>

宽度撑满

 
<Button fullWidth>宽度撑满</Button>

API

属性

属性说明类型默认值
variant按钮变体'primary' | 'secondary' | 'outline' | 'ghost''primary'
size按钮大小'sm' | 'md' | 'lg''md'
color按钮颜色'blue' | 'green' | 'red' | 'gray''blue'
disabled是否禁用booleanfalse
loading是否加载中booleanfalse
fullWidth是否宽度撑满booleanfalse