125k

Button

PreviousNext

ボタンまたはボタンに似たコンポーネントを表示します。

BaseRadixReact Aria
import { ArrowUpIcon } from "lucide-react"

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

インストール

pnpm dlx shadcn@latest add button

使い方

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/base/button"

デフォルト

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

export function ButtonDefault() {

アウトライン

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

export function ButtonOutline() {

セカンダリ

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

export function ButtonSecondary() {

ゴースト

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

export function ButtonGhost() {

破壊的

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

export function ButtonDestructive() {

リンク

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

export function ButtonLink() {

アイコン

import { CircleFadingArrowUpIcon } from "lucide-react"

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

アイコン付き

正しい間隔を確保するには、必ず data-icon="inline-start" または data-icon="inline-end" 属性をアイコンに追加してください。

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

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

丸み

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

import { ArrowUpIcon } from "lucide-react"

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

スピナー

ボタン内に <Spinner /> コンポーネントをレンダリングして、読み込み状態を表示します。正しい間隔を確保するには、必ず data-icon="inline-start" または data-icon="inline-end" 属性をスピナーに追加してください。

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

ボタングループ

ボタン グループを作成するには、ButtonGroup コンポーネントを使用します。詳細については、ボタン グループ のドキュメントを参照してください。

"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/base/button"

export function ButtonRender() {

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

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

API リファレンス

ボタン

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

小道具タイプデフォルト
variant"default" | "outline" | "ghost" | "destructive" | "secondary" | "link""default"
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"