#按钮组

#用途

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/button-group.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/styles/a3s.css";

<div role="group" aria-label="Message actions" class="button-group">
  <button type="button" class="btn" data-variant="outline">Archive</button>
  <button type="button" class="btn" data-variant="outline">Report</button>
</div>

Use data-orientation="vertical" to stack items. Use <hr role="separator" /> between items when you need a visible divider, such as a split action. Use direct child <span>, <label>, or <output> elements for non-interactive text segments. Direct child <div> elements are left unstyled for custom layouts.

#示例

#方向

使用 data-orientation="vertical" 垂直堆叠按钮。

#尺寸

#嵌套

嵌套 button-group 组件以保持每个组内的控件连接，同时增加组之间的间距。

#分离器

Use <hr role="separator" /> to visually divide buttons within a group.

#拆分式

使用分隔符创建拆分操作。

#输入

#输入组

#下拉菜单

#选择

#弹出框

#RTL

将 dir="rtl" 添加到组或祖先中。明确翻转方向图标。