compose.js

const ButtonWithPadding = ({ children, ...props }) =>
  <button style={{ padding: '15px 10px' }} {...props}>{children}</button>

const ButtonPrimary = ({ children, ...props }) =>
  <button style={{ color: 'white', backgroundColor: 'seagreen' }} {...props}>{children}</button>

const ButtonOutline = ({ children, ...props}) =>
  <button style={{ backgroundColor: 'transparent', border: '4px solid darkred' }} {...props}>{children}</button>

const ButtonBase = ({ children, ...props }) => <button {...props}>{children}</button>;

const Button = props => compose(ButtonBase /* or simply 'button' */, {
  [ButtonWithPadding]: ['primary', 'outline'].includes(variant),
  [ButtonPrimary]: props.variant === 'primary',
  [ButtonOutline]: props.variant === 'outline'
})


<Button variant="primary">Primary Button</Button>

// Equivalent of:
<ButtonWithPadding>
  <ButtonPrimary>Primary Button</ButtonPrimary>
</ButtonWithPadding>

<Button variant="outline">Outline Button</Button>