Button Group

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

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

Or import only the base CSS, the component CSS files it composes, and one style pack.

@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";

Button Group composes Button styles for the child controls.

Using CDN or bundler imports? See the Installation page.

Add your button group HTML

Wrap related controls in a button-group.

<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.

Examples

Orientation

Use data-orientation="vertical" to stack buttons vertically.

Size

Nested

Nest button-group components to keep controls joined within each group while adding spacing between groups.

Separator

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

Split

Use a separator to create a split action.

Input

Input group

Select

RTL

Add dir="rtl" to the group or an ancestor. Flip directional icons explicitly.

#Button Group

#Usage

Include CSS

Add your button group HTML

#Examples

#Orientation

#Size

#Nested

#Separator

#Split

#Input

#Input group

#Dropdown menu

#Select

#Popover

#RTL