Breaking News: Grepper is joining You.com. Read the official announcement!

react reusable button component typescirpt and tailwind css

Tired Toad answered on May 21, 2023 Popularity 5/10 Helpfulness 2/10

answer react reusable button component typescirpt and tailwind css

related react reusable button component typescirpt and tailwind css

react reusable button component typescirpt and tailwind css

Comment

import { type ButtonHTMLAttributes, type ReactNode } from "react"
import clsx from "clsx"

type buttonVariant = "regular" | "outline" | "ghost" | "link"
type buttonSize = "regular" | "large" | "small"

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  size?: buttonSize
  variant?: buttonVariant
  children: ReactNode
}

const Button = ({
  size = "regular",
  variant = "regular",
  children,
  className,
  ...props
}: Props) => {
  return (
    <button
      className={clsx(
        "h-fit w-fit rounded-lg text-xs font-medium transition-all",
        "disabled:cursor-not-allowed disabled:opacity-50",
        size === "large" && "px-5 py-3 text-base",
        size === "regular" && "px-4 py-2 text-sm",
        size === "small" && "px-2 py-2",
        variant === "regular" &&
          "bg-brand text-white hover:bg-brand-dark disabled:hover:bg-brand",
        variant === "outline" &&
          "border border-brand text-brand hover:border-brand-dark hover:bg-brand-light disabled:border-brand disabled:bg-transparent",
        variant === "ghost" &&
          "text-brand hover:bg-brand-light disabled:hover:bg-transparent",
        variant === "link" && "text-brand hover:underline disabled:no-underline"
      )}
      {...props}>
      {children}
    </button>
  )
}

export default Button

Popularity 5/10 Helpfulness 2/10 Language css

Source: www.flavienbonvin.com

Tags: button css tailwind-css

Link to this answer
Share Copy Link

Contributed on May 21 2023

Tired Toad

0 Answers Avg Quality 2/10

Closely Related Answers

react reusable button component typescirpt and tailwind css

Comment

/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors")

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          light: colors.blue[100],
          DEFAULT: colors.blue[500],
          dark: colors.blue[700],
        },
      },
    },
  },
  plugins: [],
}

Popularity 3/10 Helpfulness 1/10 Language css

Source: www.flavienbonvin.com

Tags: tailwind-css button css

Link to this answer
Share Copy Link

Contributed on May 21 2023

Tired Toad

0 Answers Avg Quality 2/10

react reusable button component typescirpt and tailwind css

Contents

More Related Answers

react reusable button component typescirpt and tailwind css

Closely Related Answers

react reusable button component typescirpt and tailwind css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.