metacubexd/src/components/Button.tsx

import { JSX, ParentComponent, Show, splitProps } from 'solid-js'
import { twMerge } from 'tailwind-merge'

export const Button: ParentComponent<
  JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
    loading?: boolean
    disabled?: boolean
  }
> = (props) => {
  const [local, others] = splitProps(props, ['class', 'loading', 'disabled'])

  return (
    <button
      class={twMerge(
        'btn',
        local.disabled && 'btn-disabled',
        local.loading ? 'btn-disabled' : local.class,
      )}
      {...others}
    >
      <Show when={local.loading}>
        <span class="loading loading-spinner" />
      </Show>

      {props.children}
    </button>
  )
}