I'm curious how does my approach affects performance. In fact if I import ./button-solid statically - it imports every time, even when I don't want to render the solid variant. That's why I came up with the idea to import it on runtime only when it's needed.

I defined solid variant as a separate component for readability because there is a pretty complex logic of micro interaction.

It works but I'm asking performance-wise.

function Button(props: ButtonProps) {
  const { className = '', children, variant, ...restProps } = props

  if (variant === 'solid') {
    const SolidButton = dynamic(() =>
      import('./button-solid').then((mod) => mod.default),
    )
    return <SolidButton {...props} />
  }

  return <button /> // Other variants
}

export default Button