@kiwicom/orbit-components/src/ButtonGroup/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

// @flow
import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../defaultTokens";
import { StyledButtonLink } from "../ButtonLink";
import { StyledButton } from "../Button";

import type { Props } from "./index";

const StyledButtonGroup = styled.div`
  display: flex;

  & ${StyledButtonLink}, & ${StyledButton} {
    border-radius: ${({ connected }) => connected && "0"};
    margin-right: ${({ theme, connected }) =>
      connected ? theme.orbit.marginRightButtonGroup : theme.orbit.spaceXSmall};

    &:first-child {
      border-radius: ${({ connected, theme }) =>
        connected &&
        `${theme.orbit.borderRadiusNormal} 0 0
          ${theme.orbit.borderRadiusNormal}`};
    }

    &:last-child {
      border-radius: ${({ connected, theme }) =>
        connected && `0 ${theme.orbit.borderRadiusNormal} ${theme.orbit.borderRadiusNormal} 0`};
      margin-right: 0;
    }
  }
`;

StyledButtonGroup.defaultProps = {
  theme: defaultTokens,
};

const ButtonGroup = ({ children, connected, dataTest }: Props) => (
  <StyledButtonGroup connected={connected} data-test={dataTest}>
    {children}
  </StyledButtonGroup>
);

export default ButtonGroup;