ボタン

フォームの送信、ツールバー、および取り消し不可の確認画面用のクリック可能なトリガーです。太い枠線と、クリック時に影が沈み込むような効果が特徴です。

import { ArrowUpIcon } from "lucide-react"

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

Button はアクションを起動します。送信、確認、削除などです。Base UI Button コンポーネント上に構築し、ネオブルータリストのレシピに沿ってスタイルしています。太い枠線、硬いオフセットの影、クリックで影に沈み込むアクティブ状態です。

次のような場面で使います：

フォーム送信と主要 CTA — 主アクションは default、その横は secondary や outline。
ツールバーとアイコン操作 — icon サイズで正方形ボタンを作り、ButtonGroup でセグメント状に並べます。
破壊的な確認 — 削除・除去には destructive。多くの場合ダイアログの後ろに置きます。

インストール


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json

以下の依存関係をインストールします：


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

以下のコードをコピーしてプロジェクトに貼り付けます。

components/ui/button.tsx

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

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

const buttonVariants = cva(
  cn(
    "group/button font-head font-medium inline-flex cursor-pointer items-center justify-center gap-2 rounded whitespace-nowrap select-none transition-all duration-200",
    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60",
    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive",
    // Icons keep their own size; we only set a default when none is given so
    // Neobrutalism's h-4/size-4 icons aren't overridden.
    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
  ),
  {
    variants: {
      variant: {
        default:
          "border-2 border-black bg-primary text-primary-foreground shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-primary-hover hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
        secondary:
          "border-2 border-black bg-secondary text-secondary-foreground shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-secondary-hover hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
        destructive:
          "border-2 border-black bg-destructive text-destructive-foreground shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-destructive/90 hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
        outline:
          "border-2 bg-transparent shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
        ghost: "bg-transparent hover:bg-accent",
        link: "bg-transparent hover:underline",
      },
      size: {
        default: "px-4 py-1.5 text-base",
        xs: "px-2 py-0.5 text-xs",
        sm: "px-3 py-1 text-sm",
        lg: "px-6 py-2 text-base lg:px-8 lg:py-3 lg:text-lg",
        icon: "p-2",
        "icon-xs": "p-1",
        "icon-sm": "p-1.5",
        "icon-lg": "p-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot.Root : "button"

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }

プロジェクトの構成に合わせてインポートパスを更新します。

使い方

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

<Button variant="outline">Button</Button>

カーソル

Tailwind v4 では、ボタンコンポーネントの cursor: pointer が cursor: default に変更されました。

cursor: pointer の動作を維持したい場合は、以下のコードを CSS ファイルに追加します：

プロジェクトのセットアップ時に npx shadcn@latest init --pointer で有効にすることもできます。

globals.css

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

使用例

サイズ

size プロパティを使って、ボタンのサイズを変更します。

import { ArrowUpRightIcon } from "lucide-react"

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

Default

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

export function ButtonDefault() {

Outline

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

export function ButtonOutline() {

Secondary

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

export function ButtonSecondary() {

Ghost

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

export function ButtonGhost() {

Destructive

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

export function ButtonDestructive() {

Link

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

export function ButtonLink() {

Icon

import { CircleFadingArrowUpIcon } from "lucide-react"

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

アイコン付き

正しい間隔にするため、アイコンに data-icon="inline-start" または data-icon="inline-end" 属性を追加することを忘れないでください。

import { IconGitBranch, IconGitFork } from "@tabler/icons-react"

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

角丸

rounded-full クラスを使って、ボタンを丸くします。

import { ArrowUpIcon } from "lucide-react"

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

Spinner

ボタンの中に <Spinner /> コンポーネントを表示して、ローディング状態を示します。正しい間隔にするため、スピナーに data-icon="inline-start" または data-icon="inline-end" 属性を追加することを忘れないでください。

import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

Button Group

ボタングループを作成するには、ButtonGroup コンポーネントを使用します。詳しくは Button Group のドキュメントをご覧ください。

"use client"

import * as React from "react"

リンクとして

buttonVariants ヘルパーを使って、リンクをボタンのように見せることができます。

リンクには <Button render={<a />} nativeButton={false} /> を使用しないでください。 Base UI の Button コンポーネントは常に role="button" を適用するため、<a> 要素のセマンティックなリンクロールが上書きされてしまいます。代わりに、素の <a> タグとともに buttonVariants を使用してください。

import { buttonVariants } from "@/components/ui/button"

export function ButtonRender() {

RTL

Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。

"use client"

import { ArrowRightIcon, PlusIcon } from "lucide-react"

アクセシビリティ

Button は WAI-ARIA Button パターンに従います。既定ではネイティブの <button> を描画します。render で別要素に差し替えた場合、Base UI が role="button"、tabindex、キーボード起動を配線し、支援技術からは本物のボタンのように振る舞います（その role が不適切な唯一のケースは、上記の As Link の注記を参照）。

キーボード操作：

キー	操作
`Tab` / `Shift + Tab`	ボタンへ／ボタンからフォーカスを移動
`Space` / `Enter`	ボタンを起動

APIリファレンス

Button

Button コンポーネントは、button 要素をラップし、さまざまなスタイルと機能を追加します。

Prop	Type	Default
`variant`	`"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"`	`"default"`
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`