Button

用户使用按钮来触发一个操作或者进行跳转

基础按钮

Preview
Code

按钮变体

Preview
Code

尺寸设置

Preview
Code

按钮图标

Preview
Code

Props

sizeenum
middle
组件尺寸： small , middle , large
variantenum
primary
组件变体： primary , success , info , warning , danger , ghost
disabledboolean
false
是否禁用组件
loadingboolean
false
是否启用组件加载状态
classstring
透传的组件样式类
typeButtonHTMLAttributes['type']
button
原生元素按钮表单类型
iconboolean
false
是否是图标按钮
titlestring
按钮
原生title
fullboolean
false
是否为撑满宽度

Attrs

Omit<ButtonHTMLAttributes,'class'>object
原生 button 的 attrs

样式

Code 
  export default obCva<IButtonProps>('py-2 p-x-2.5 flex justify-center text-center items-center gap-2 rounded-normal font-bold hover:opacity-80 active:brightness-90', {
    variants: {
      size: {
        small: 'text-xs',
        middle: 'text-sm',
        large: 'text-lg px-3',
      },
      variant: {
        primary: 'bg-primary c-white',
        success: 'bg-success c-white',
        info: 'bg-mediumGray c-black',
        warning: 'bg-warning c-white',
        danger: 'bg-danger c-white',
        ghost: ' bg-transparent hover:bg-mediumGray hover:opacity-100 c-black',
      },
      icon: {
        true: 'aspect-square',
      },
      full: {
        true: 'w-full',
      },
    },
  })
主题配置
主题采用 token + class 的形式
Link
通过链接进行跳转或操作