Button

A customizable button component with Memphis-inspired design featuring multiple variants, shapes, and shadow colors.

Installation

shadcn CLI (Recommended)

Install the Button component using the shadcn CLI:

Terminal

npx shadcn@latest add https://memphi.dev/r/button.json

Manual Installation

Copy and paste the component code into your project:

Prerequisites: Make sure you have completed the installation setup before adding components.

Usage

Import the component

import { Button } from "@/components/memphi/button"

export default function Example() {
  return <Button>Click me!</Button>
}

Examples

Variants

Shapes

Sizes

Custom Shadow Colors

Props

Prop	Type	Default	Description
variant	string	default	Button variant: default \| destructive \| outline \| secondary \| ghost \| link
shape	string	oval	Button shape: oval \| rectangle
size	string	default	Button size: sm \| default \| lg \| xl \| icon
shadowColor	string	rgba(0,0,0,1)	Custom shadow color in any CSS color format
asChild	boolean	false	Change the component to the passed child (Radix UI pattern)

Manual Installation

1. Copy the component code

components/memphi/button.tsx

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

type ButtonShape = 'oval' | 'rectangle'

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap text-sm font-sans font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-2 border-black font-bold uppercase tracking-wide transform transition-all duration-150 active:translate-x-1 active:translate-y-1 active:shadow-none",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive: "bg-destructive text-white",
        outline: "bg-white text-black border-2 border-black",
        secondary: "bg-secondary text-black",
        ghost: "bg-transparent border-transparent text-black hover:bg-accent hover:border-black",
        link: "text-black underline-offset-4 hover:underline border-transparent shadow-none hover:shadow-none active:translate-x-0 active:translate-y-0",
      },
      shape: {
// ... (click expand to see more)

2. Install dependencies

Terminal

npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge

3. Add utility function (if not already added)

lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Ready to Build?

Start using the Button component in your project and explore more examples!

More Components Coming Soon! 🚀

We're working hard to bring you more Memphis-inspired components. Stay tuned for inputs, cards, modals, and more!