Skip to content

Instantly share code, notes, and snippets.

@michael

michael/Button.js

Created March 7, 2022 18:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michael/c88252a783718fe5ab208e862d842cb7 to your computer and use it in GitHub Desktop.
Save michael/c88252a783718fe5ab208e862d842cb7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Button.js
import React from 'react'
import Link from 'next/link'
const ButtonType = {
primary: 'disabled:opacity-50 inline-flex whitespace-nowrap justify-center rounded-md border border-transparent shadow-sm bg-pink font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-pink sm:w-auto',
secondary: 'disabled:opacity-50 inline-flex whitespace-nowrap items-center justify-center border-2 border-gray-200 rounded-md font-medium text-pink bg-white focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-pink',
white: 'disabled:opacity-50 inline-flex whitespace-nowrap items-center justify-center border border-pink rounded-md font-medium text-pink bg-white focus:outline-none focus:ring-2 focus:ring-white',
delete: 'disabled:opacity-50 inline-flex whitespace-nowrap justify-center rounded-md border border-transparent shadow-sm bg-red-600 font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-red-500 sm:w-auto',
plain: 'disabled:opacity-50 whitespace-nowrap justify-center rounded-md border border-transparent font-medium text-white focus:outline-none focus:ring-2 focus:ring-white sm:w-auto'
}
const ButtonSize = {
sm: 'py-1 px-2 italic text-sm',
md: 'pt-3 pb-2.5 px-4',
lg: 'py-2 px-4 italic'
}
const Button = React.forwardRef(({ size = 'sm', type = 'secondary', title, active, disabled, children, onClick, href, className }, ref) => {
const classNames = [ButtonType[type], ButtonSize[size], className]
if (active) {
classNames.push('bg-white', 'text-blue')
}
if (href) {
return (
<Link href={href}>
<a
ref={ref}
title={title}
className={classNames.join(' ')}
>
{children}
</a>
</Link>
)
} else {
return (
<button
ref={ref}
title={title}
className={classNames.join(' ')}
onClick={onClick}
disabled={disabled}
>
{children}
</button>
)
}
})
export default Button
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment