import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Alignment , Classes } from "../../common" ; import { DISPLAYNAME_PREFIX , HTMLDivProps , Props } from "../../common/props" ; export type ButtonGroupProps = IButtonGroupProps ; deprecated export interface IButtonGroupProps extends Props , HTMLDivProps { /**
     * Text alignment within button. By default, icons and text will be centered
     * within the button. Passing `"left"` or `"right"` will align the button
     * text to that side and push `icon` and `rightIcon` to either edge. Passing
     * `"center"` will center the text and icons together.
     */ alignText ? : Alignment ; default fill ? : boolean ; default minimal ? : boolean ; default large ? : boolean ; default vertical ? : boolean ; } @ polyfill export class ButtonGroup extends AbstractPureComponent2 < ButtonGroupProps > { public static displayName = `${ DISPLAYNAME_PREFIX }.ButtonGroup` ; public render ( ) { const { alignText , className , fill , minimal , large , vertical , ... htmlProps } = this . props ; const buttonGroupClasses = classNames ( Classes . BUTTON_GROUP , { [ Classes . FILL ] : fill , [ Classes . LARGE ] : large , [ Classes . MINIMAL ] : minimal , [ Classes . VERTICAL ] : vertical , } , Classes . alignmentClass ( alignText ) , className ) ; return ( < div { ... htmlProps } className = { buttonGroupClasses } > { this . props . children } < /div>); } }