ElyriButton
按钮：四种视觉样式、三档尺寸，内置加载态与焦点环，其余属性透传给原生 button。
安装
添加组件
pnpm dlx @elyri/cli@latest add button示例
基础用法
点击后进入加载态，2.5 秒后自动恢复。
import { useEffect, useState } from 'react';
import { Button } from './components/elyri/Button';
export function Example() {
const [loading, setLoading] = useState(false);
useEffect(() => {
if (!loading) return;
const timer = setTimeout(() => setLoading(false), 2500);
return () => clearTimeout(timer);
}, [loading]);
return (
<Button loading={loading} onClick={() => setLoading(true)}>
Get started
</Button>
);
}全部变体
四种视觉样式：primary / secondary / ghost / danger。
import { Button } from './components/elyri/Button';
export function Example() {
return (
<div className="demo-ui-row">
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Delete</Button>
</div>
);
}带图标
图标可置于文字前或后；iconOnly 压成正方形纯图标按钮，需搭配 aria-label。
import { Button } from './components/elyri/Button';
function PlusIcon() {
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" aria-hidden="true">
<path d="M12 5v14M5 12h14" />
</svg>
);
}
function ArrowRightIcon() {
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" aria-hidden="true">
<path d="M5 12h14M13 6l6 6-6 6" />
</svg>
);
}
export function Example() {
return (
<div className="demo-ui-row">
<Button leadingIcon={<PlusIcon />}>New</Button>
<Button variant="secondary" trailingIcon={<ArrowRightIcon />}>
Next
</Button>
<Button variant="secondary" iconOnly aria-label="Add">
<PlusIcon />
</Button>
</div>
);
}纯圆形
circle 把按钮压成正方形并取满圆角，适合图标操作；不同尺寸与变体均可用。
import { Button } from './components/elyri/Button';
function PlusIcon() {
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" aria-hidden="true">
<path d="M12 5v14M5 12h14" />
</svg>
);
}
export function Example() {
return (
<div className="demo-ui-row">
<Button circle aria-label="Add">
<PlusIcon />
</Button>
<Button variant="secondary" circle aria-label="Add">
<PlusIcon />
</Button>
<Button variant="danger" size="sm" circle aria-label="Delete">
<PlusIcon />
</Button>
</div>
);
}尺寸
三档尺寸：sm / md / lg。
import { Button } from './components/elyri/Button';
export function Example() {
return (
<div className="demo-ui-row">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</div>
);
}加载态
显示 spinner、置为禁用并标记 aria-busy。
import { Button } from './components/elyri/Button';
export function Example() {
return (
<div className="demo-ui-row">
<Button loading>Submitting</Button>
<Button variant="secondary" loading>
Saving
</Button>
</div>
);
}禁用态
原生 disabled 状态，不可点击。
import { Button } from './components/elyri/Button';
export function Example() {
return (
<div className="demo-ui-row">
<Button disabled>Primary</Button>
<Button variant="secondary" disabled>
Secondary
</Button>
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' | 视觉样式：primary / secondary / ghost / danger |
size | 'sm' | 'md' | 'lg' | 'md' | 控件尺寸：sm / md / lg |
loading | boolean | false | 加载中：显示 spinner、置为禁用并标记 aria-busy |
leadingIcon | ReactNode | — | 前置图标，随按钮字号缩放；加载时让位给 spinner |
trailingIcon | ReactNode | — | 后置图标，随按钮字号缩放；加载时隐藏 |
iconOnly | boolean | false | 纯图标按钮：去掉左右内边距并压成正方形，需自行提供 aria-label |
circle | boolean | false | 纯圆形按钮：压成正方形并取满圆角，适合图标操作，需自行提供 aria-label |
children | ReactNode | — | 按钮内容 |
...rest | ButtonHTMLAttributes | — | 其余属性透传给原生 button |