@equinor/eds-core-react/dist/esm/components/Button/ButtonGroup/ButtonGroup.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { group } from './ButtonGroup.tokens.js';
import { jsx } from 'react/jsx-runtime';

const {
  border
} = group;
const radius = border.type === 'border' && border.radius;
const ButtonGroupBase = styled.div.withConfig({
  displayName: "ButtonGroup__ButtonGroupBase",
  componentId: "sc-1fn8jon-0"
})(["display:inline-flex;> *{border-radius:0;@media (hover:hover) and (pointer:fine){&:hover{border-radius:0;}}}", ""], ({
  $vertical
}) => $vertical ? css(["flex-direction:column;> :first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> :last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-bottom:none;}"], radius, radius, radius, radius) : css(["> :first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}> :last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-right:none;}"], radius, radius, radius, radius));
const ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup({
  children,
  vertical,
  ...rest
}, ref) {
  const props = {
    ref,
    $vertical: vertical,
    ...rest
  };
  return /*#__PURE__*/jsx(ButtonGroupBase, {
    role: "group",
    ...props,
    children: children
  });
});

export { ButtonGroup };