Button 按钮

按钮用于触发一个操作。提供主要、次要、静默三种变体，与三种尺寸。

基础用法

import { Button } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
    </>
  )
}

尺寸

import { Button } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </>
  )
}

禁用与加载

import { Button } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Button variant="primary" disabled>Disabled</Button>
      <Button variant="primary" loading>Loading</Button>
    </>
  )
}

按钮类型

import { Button } from '@airo-ui/react'

function Demo() {
  return (
    <form>
      <Button type="submit">提交</Button>
      <Button type="reset">重置</Button>
    </form>
  )
}

API

Props

名称	类型	默认值	说明
variant	'primary' | 'secondary' | 'ghost'	'secondary'	视觉变体
size	'sm' | 'md' | 'lg'	'md'	尺寸
disabled	boolean	false	是否禁用
loading	boolean	false	加载态，显示 spinner
type	'button' | 'submit' | 'reset'	'button'	原生 type
onClick	(e: MouseEvent) => void	—	点击时触发

交互特性

• hover 时上浮 1px 并加深阴影
• active 时 scale(0.96) spring 回弹
• 颜色过渡使用 --ease-smooth，缩放使用 --ease-spring