custom-button.tsx

import { Component, h, Prop } from '@stencil/core'

const getButtonClass = (classname, color, small) =>
  `custom-button ${classname} ${color} ${small ? 'small' : ''}`

export type Color = 'primary' | 'secondary' | 'tertiary'

@Component({
  tag: 'custom-button',
  styleUrl: 'custom-button.css',
  shadow: true,
})

export class CustomButtonComponent {
  @Prop() classname: string = ''
  @Prop() color: Color = 'primary'
  @Prop() small: boolean = false

  render() {
    return (
      <button class={getButtonClass(this.classname, this.color, this.small)}>
        <slot></slot>
      </button>
    )
  }
}