# Button Group

## Usage Import Tailwind and one full Basecoat style bundle. ```css @import "tailwindcss"; @import "basecoat-css/vega.css"; ``` Or import only the base CSS, the component CSS files it composes, and one style pack. ```css @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](/installation). Wrap related controls in a `button-group`. ```html

``` Use `data-orientation="vertical"` to stack items. Use `

` between items when you need a visible divider, such as a split action. Use direct child ``, ``, or `` elements for non-interactive text segments. Direct child `

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

` to visually divide buttons within a group.

### Split Use a separator to create a split action.

### Input

### Input group

### Dropdown menu

### Select

### Popover

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