# Brutalist Button

> Neo-brutalist button with thick border and hard shadow that lifts on hover and flattens on press.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/brutalist-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/brutalist-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/brutalist-button-demo.tsx"
import { BrutalistButton } from "@/components/brutalist-button"

export default function BrutalistButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 rounded-2xl bg-white p-12">
      <BrutalistButton>Buy now</BrutalistButton>
      <BrutalistButton className="bg-pink-400">Sign up</BrutalistButton>
      <BrutalistButton className="bg-cyan-300">Learn more</BrutalistButton>
    </div>
  )
}
```

## Source

```tsx title="components/brutalist-button.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export function BrutalistButton({ className, ...props }: React.ComponentProps<"button">) {
  return (
    <button
      type="button"
      className={cn(
        "inline-flex h-12 items-center justify-center gap-2 border-2 border-black bg-yellow-300 px-6 text-sm font-black tracking-wide text-black uppercase select-none",
        "shadow-[4px_4px_0_0_#000] transition-[transform,box-shadow] duration-100",
        "hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0_0_#000]",
        "active:translate-x-1 active:translate-y-1 active:shadow-none",
        "focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-black focus-visible:outline-dashed",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}
```