# Button Group ```mdx

``` ## 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. ```mdx

``` ### Size ```mdx

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

``` ### Separator Use `

` to visually divide buttons within a group. ```mdx

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

``` ### Input ```mdx

``` ### Input group ```mdx

``` ### Dropdown menu ```mdx

``` ### Select ```mdx

``` ### Popover ```mdx

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

```