ElyriButtonGroup
按钮组：把相邻按钮拼成一体，仅保留外侧圆角并自动补上淡分隔线，支持横向 / 纵向与拼接 / 分离。
安装
添加组件
pnpm dlx @elyri/cli@latest add button-group示例
基础用法
三个按钮首尾相接，悬停时当前按钮浮到最上层。
import { Button } from './components/elyri/Button';
import { ButtonGroup } from './components/elyri/ButtonGroup';
export function Example() {
return (
<ButtonGroup aria-label="Text align">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Center</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>
);
}配合不同变体
primary / secondary / danger 等实心或描边按钮拼接后依然清晰可辨。
import { Button } from './components/elyri/Button';
import { ButtonGroup } from './components/elyri/ButtonGroup';
export function Example() {
return (
<div className="demo-ui-row">
<ButtonGroup aria-label="Alignment">
<Button>Left</Button>
<Button>Center</Button>
<Button>Right</Button>
</ButtonGroup>
<ButtonGroup aria-label="Archive">
<Button variant="danger">Delete</Button>
<Button variant="danger">Archive</Button>
</ButtonGroup>
</div>
);
}纵向与分离
orientation="vertical" 纵向排列；attached={false} 保留间距，各自独立成形。
import { Button } from './components/elyri/Button';
import { ButtonGroup } from './components/elyri/ButtonGroup';
export function Example() {
return (
<div className="demo-ui-row">
<ButtonGroup orientation="vertical" aria-label="Zoom">
<Button variant="secondary">Zoom in</Button>
<Button variant="secondary">Zoom out</Button>
<Button variant="secondary">Reset</Button>
</ButtonGroup>
<ButtonGroup attached={false} aria-label="Confirm">
<Button variant="secondary">Cancel</Button>
<Button>Save</Button>
</ButtonGroup>
</div>
);
}带图标
iconOnly 让每个分段变成正方形图标按钮；也可用 leadingIcon 让图标与文字并排。
import { Button } from './components/elyri/Button';
import { ButtonGroup } from './components/elyri/ButtonGroup';
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, MinusIcon, PlusIcon } from './icons';
export function Example() {
return (
<div className="demo-ui-row">
<ButtonGroup aria-label="Text align">
<Button variant="secondary" iconOnly aria-label="Align left">
<AlignLeftIcon />
</Button>
<Button variant="secondary" iconOnly aria-label="Align center">
<AlignCenterIcon />
</Button>
<Button variant="secondary" iconOnly aria-label="Align right">
<AlignRightIcon />
</Button>
</ButtonGroup>
<ButtonGroup aria-label="Zoom">
<Button variant="secondary" leadingIcon={<MinusIcon />}>
Zoom out
</Button>
<Button variant="secondary" leadingIcon={<PlusIcon />}>
Zoom in
</Button>
</ButtonGroup>
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | 排列方向：horizontal / vertical |
attached | boolean | true | 按钮是否首尾相接：true 拼成一体，false 保留间距 |
children | ReactNode | — | 组内按钮，通常为 Button |
...rest | HTMLAttributes<HTMLDivElement> | — | 其余属性透传给原生 div |