Button Group

Button
Card

Button Group

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

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

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/button-group.css";
@import "basecoat-css/components/button.css";
@import "basecoat-css/styles/vega.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

Popover

RTL

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