Function Button

apps/docs/src/components/button.tsx:12–32

({ children, onClick, active, className, style }: ButtonProps)

}

export function Button({ children, onClick, active, className, style }: ButtonProps) {
  return (
    <button
      style={style}
      onMouseDown={evt => {
        evt.preventDefault()
        evt.stopPropagation()
      }}
      onClick={onClick}
      css={[
        tw`text-base leading-tight font-bold border rounded-lg py-2 px-4 focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:border-link active:text-white active:ring-0 active:ring-offset-0 outline-none inline-flex items-center my-1`,
        active && tw`bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link`,
        !active &&
          tw`bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent`,
      ]}
      className={className}
    >
      {children}
    </button>
  )
}

Button.defaultProps = {
  active: false,