Button 按钮

多功能按钮组件，带有 DaisyUI 样式和多种变体。

引入

import { Button } from 'asterui'

示例

品牌颜色

用于常见操作的主要品牌颜色。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">Primary</Button>
        <Button color="secondary">Secondary</Button>
        <Button color="accent">Accent</Button>
        <Button color="neutral">Neutral</Button>
      </Space>
    )
}

export default App

状态颜色

用于不同状态和反馈的语义颜色。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="info">Info</Button>
        <Button color="success">Success</Button>
        <Button color="warning">Warning</Button>
        <Button color="error">Error</Button>
      </Space>
    )
}

export default App

变体

不同的样式变体：solid（默认）、outline、dash、soft、ghost 和 link。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">Solid</Button>
        <Button color="primary" variant="outline">Outline</Button>
        <Button color="primary" variant="dash">Dash</Button>
        <Button color="primary" variant="soft">Soft</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="link">Link</Button>
      </Space>
    )
}

export default App

尺寸

五种尺寸：xs、sm、md（默认）、lg 和 xl。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm" align="center">
        <Button size="xs">XS</Button>
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">Large</Button>
        <Button size="xl">XL</Button>
      </Space>
    )
}

export default App

描边

带透明背景的描边变体。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" variant="outline">Primary</Button>
        <Button color="secondary" variant="outline">Secondary</Button>
        <Button color="accent" variant="outline">Accent</Button>
        <Button color="success" variant="outline">Success</Button>
        <Button color="error" variant="outline">Error</Button>
      </Space>
    )
}

export default App

虚线边框

带虚线边框样式的按钮。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" variant="dash">Primary</Button>
        <Button color="secondary" variant="dash">Secondary</Button>
        <Button color="accent" variant="dash">Accent</Button>
      </Space>
    )
}

export default App

柔和颜色

用于细微强调的柔和色彩背景。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" variant="soft">Primary</Button>
        <Button color="secondary" variant="soft">Secondary</Button>
        <Button color="accent" variant="soft">Accent</Button>
        <Button color="success" variant="soft">Success</Button>
        <Button color="warning" variant="soft">Warning</Button>
      </Space>
    )
}

export default App

状态

激活、加载和禁用状态。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">Normal</Button>
        <Button color="primary" active>Active</Button>
        <Button color="primary" loading>Loading</Button>
        <Button color="primary" disabled>Disabled</Button>
      </Space>
    )
}

export default App

形状

用于图标按钮的方形和圆形形状。

import { Button, Space } from 'asterui'
import { XMarkIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm" align="center">
        <Button color="primary" shape="square">
          <XMarkIcon />
        </Button>
        <Button color="primary" shape="circle">
          <XMarkIcon />
        </Button>
      </Space>
    )
}

export default App

加宽

用于强调的超宽按钮。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Button color="primary" shape="wide">Wide Button</Button>
        <Button color="secondary" shape="wide">Another Wide</Button>
      </Space>
    )
}

export default App

块级

全宽按钮。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" className="w-full">
        <Button color="primary" shape="block">Block Button</Button>
        <Button color="secondary" shape="block">Another Block</Button>
      </Space>
    )
}

export default App

加载状态

带不同颜色的加载旋转器。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" loading>Loading</Button>
        <Button color="success" loading>Processing</Button>
        <Button color="error" loading>Deleting</Button>
      </Space>
    )
}

export default App

链接按钮

导航到 URL 的按钮。提供 href 时渲染为锚元素。

GitHub npm Internal Link

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" href="https://github.com" target="_blank">GitHub</Button>
        <Button variant="ghost" href="https://npmjs.com" target="_blank">npm</Button>
        <Button href="/components" variant="link">Internal Link</Button>
      </Space>
    )
}

export default App

带图标

使用 icon 属性自动设置间距的带图标按钮。

import { Button, Space } from 'asterui'
import { ArrowUpTrayIcon, CheckIcon, TrashIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" icon={<ArrowUpTrayIcon />}>
          Upload
        </Button>
        <Button color="success" icon={<CheckIcon />}>
          Save
        </Button>
        <Button color="error" icon={<TrashIcon />} iconPosition="end">
          Delete
        </Button>
      </Space>
    )
}

export default App

自动调整大小的图标

来自 @aster-ui/icons 的图标会自动匹配按钮大小。

import { Button, Space } from 'asterui'
import { ArrowUpTrayIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm" align="center">
        <Button size="xs" color="primary" icon={<ArrowUpTrayIcon />}>XS</Button>
        <Button size="sm" color="primary" icon={<ArrowUpTrayIcon />}>Small</Button>
        <Button size="md" color="primary" icon={<ArrowUpTrayIcon />}>Medium</Button>
        <Button size="lg" color="primary" icon={<ArrowUpTrayIcon />}>Large</Button>
        <Button size="xl" color="primary" icon={<ArrowUpTrayIcon />}>XL</Button>
      </Space>
    )
}

export default App

危险按钮

用于破坏性操作的语义危险样式。

import { Button, Space } from 'asterui'
import { TrashIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button danger>Delete</Button>
        <Button danger icon={<TrashIcon />}>
          Remove Item
        </Button>
        <Button danger variant="outline">Cancel Account</Button>
      </Space>
    )
}

export default App

圆角形状

完全圆角的胶囊形按钮。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" shape="round">Get Started</Button>
        <Button color="secondary" shape="round">Learn More</Button>
        <Button color="accent" shape="round">Subscribe</Button>
      </Space>
    )
}

export default App

切换按钮

使用 pressed 属性实现无障碍的切换按钮。

import { Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [pressed, setPressed] = useState(false)
  
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button
          color="primary"
          pressed={pressed}
          active={pressed}
          onClick={() => setPressed(!pressed)}
        >
          {pressed ? 'On' : 'Off'}
        </Button>
        <Button
          color="secondary"
          variant="outline"
          pressed={pressed}
          active={pressed}
          onClick={() => setPressed(!pressed)}
        >
          Toggle: {pressed ? 'Active' : 'Inactive'}
        </Button>
      </Space>
    )
}

export default App

无动画

禁用点击动画效果。

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">With Animation</Button>
        <Button color="primary" noAnimation>No Animation</Button>
      </Space>
    )
}

export default App

表单提交

在 AsterUI Form 组件内使用 htmlType='submit' 的按钮。

import { Button, Space, Input, Form, notification } from 'asterui'

function App() {
  const handleFinish = (values: { email: string }) => {
    notification.success({ message: 'Submitted!', description: `Email: ${values.email}` })
  }
  
  return (
      <Form onFinish={handleFinish}>
        <Form.Item name="email" label="Email" required>
          <Input type="email" placeholder="you@example.com" />
        </Form.Item>
        <Form.Item>
          <Space direction="horizontal" size="sm">
            <Button color="primary" htmlType="submit">Submit</Button>
            <Button htmlType="reset">Reset</Button>
          </Space>
        </Form.Item>
      </Form>
    )
}

export default App

事件处理

带 onClick 处理函数和状态管理的按钮。

import { Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  const [loading, setLoading] = useState(false)
  
  const handleAsync = async () => {
    setLoading(true)
    await new Promise(resolve => setTimeout(resolve, 2000))
    setLoading(false)
  }
  
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" onClick={() => setCount(c => c + 1)}>
          Clicked {count} times
        </Button>
        <Button color="secondary" onClick={handleAsync} loading={loading}>
          {loading ? 'Processing...' : 'Async Action'}
        </Button>
      </Space>
    )
}

export default App

API

`Button`

属性	描述	类型	默认值
`type`	同时设置 variant 和 color 的语法糖。被显式的 variant & color 属性覆盖	`'primary' \| 'default' \| 'dashed' \| 'link' \| 'text'`	-
`color`	按钮颜色	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	-
`variant`	按钮样式变体	`'solid' \| 'outline' \| 'dash' \| 'soft' \| 'ghost' \| 'link' \| 'text'`	-
`size`	按钮大小	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`active`	激活/按下的视觉状态	`boolean`	`false`
`loading`	显示加载旋转器并禁用按钮	`boolean`	`false`
`shape`	按钮形状	`'square' \| 'circle' \| 'wide' \| 'block' \| 'round'`	-
`block`	使按钮宽度为100%	`boolean`	`false`
`ghost`	使背景透明并反转文本和边框颜色	`boolean`	`false`
`icon`	要显示的图标元素	`ReactNode`	-
`iconPlacement`	图标的位置	`'start' \| 'end'`	`'start'`
`danger`	应用错误/危险样式（color=“error” 的简写）	`boolean`	`false`
`pressed`	切换按钮的按下状态（设置 aria-pressed）	`boolean`	-
`noAnimation`	禁用点击动画	`boolean`	`false`
`disabled`	禁用状态	`boolean`	`false`
`aria-label`	仅图标按钮的无障碍标签	`string`	-
`href`	要导航到的 URL（渲染为锚元素）	`string`	-
`target`	打开链接 URL 的位置（当设置 href 时）	`string`	-
`htmlType`	HTML 按钮类型（仅当未设置 href 时）	`'button' \| 'submit' \| 'reset'`	`'button'`
`className`	额外的 CSS 类名	`string`	-
`children`	按钮内容	`ReactNode`	-
`data-testid`	用于测试的测试 ID	`string`	-

数据属性

Button 组件公开以下数据属性用于测试和状态检查：

data-state-loading: 按钮处于加载状态时存在
data-state-disabled: 按钮被禁用时存在
data-state-active: 按钮处于激活状态时存在
data-state-pressed: 按钮处于按下状态时存在（切换按钮）

无障碍

使用原生 <button> 元素以获得适当的键盘支持
提供 href 时渲染为 <a> 元素以获得适当的链接语义
加载状态设置 aria-busy="true" 并禁用按钮
切换按钮使用 aria-pressed 以支持屏幕阅读器
仅图标按钮应使用 aria-label 以支持屏幕阅读器
禁用状态会正确传达给辅助技术
焦点状态对键盘导航可见