按钮

已上架

按钮组件，源码位于 components/ui/button.tsx。以下示例为组件库源码的构建期真实渲染。

主按钮Primary

次级按钮Secondary

危险按钮Destructive

边框图标Outlined icon

图标按钮Icon

文本按钮Text

import { Button } from "@/components/ui/button"
import { Icon } from "@/daren-design/icons/Icon"

export function ButtonBasicStyles() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button type="button" variant="brand">保存更改</Button>
      <Button type="button" variant="outline">取消</Button>
      <Button type="button" variant="destructive">删除</Button>
      <Button type="button" variant="outline" size="icon" aria-label="更多">
        <Icon name="more" />
      </Button>
      <Button type="button" variant="ghost" size="icon" aria-label="更多">
        <Icon name="more" />
      </Button>
      <Button type="button" variant="ghost">更多</Button>
    </div>
  )
}

正常Default

悬浮Hover

键盘焦点Keyboard focus

禁用Disabled

加载Loading

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

export function ButtonStateMatrix() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button type="button" variant="brand" size="default">正常态</Button>
      <Button type="button" variant="brand" size="default" className="bg-[var(--color-brand-hover)]">悬浮态</Button>
      <Button type="button" variant="brand" size="default" className="![box-shadow:inset_0_0_0_var(--focus-ring-width)_var(--color-background)]">焦点态</Button>
      <Button type="button" variant="brand" size="default" disabled>不可用</Button>
      <Button type="button" variant="brand" size="default" loading loadingText="保存中">保存</Button>
    </div>
  )
}

sm 28

md 32

lg 36

import { Button } from "@/components/ui/button"
import { Icon } from "@/daren-design/icons/Icon"

const sizes = [
  { code: "sm", size: "sm", icon: "icon-sm", height: 28 },
  { code: "md", size: "default", icon: "icon", height: 32 },
  { code: "lg", size: "lg", icon: "icon-lg", height: 36 },
] as const

export function ButtonSizeVariants() {
  return (
    <div className="grid gap-4">
      {sizes.map((row) => (
        <div key={row.code} className="flex flex-wrap items-center gap-4">
          <span>{row.code} {row.height}</span>
          <Button type="button" variant="brand" size={row.size}>保存更改</Button>
          <Button type="button" variant="outline" size={row.size}>取消</Button>
          <Button type="button" variant="destructive" size={row.size}>删除</Button>
          <Button type="button" variant="outline" size={row.icon} aria-label="更多">
            <Icon name="more" />
          </Button>
          <Button type="button" variant="ghost" size={row.icon} aria-label="更多">
            <Icon name="more" />
          </Button>
          <Button type="button" variant="ghost" size={row.size}>更多</Button>
        </div>
      ))}
    </div>
  )
}

带图标主按钮Primary with icon

带图标次按钮Secondary with icon

危险按钮Destructive

图标 + 文本Icon + text

加宽黑色主按钮Wide black primary

加宽灰色次按钮Wide gray secondary

import { Button } from "@/components/ui/button"
import { Icon } from "@/daren-design/icons/Icon"

export function ButtonStyleVariants() {
  return (
    <div className="grid gap-6">
      <div className="flex flex-wrap items-center gap-4">
        <Button type="button" variant="brand">
          <Icon name="add" />
          新建
        </Button>
        <Button type="button" variant="outline">
          <Icon name="edit" />
          编辑
        </Button>
        <Button type="button" variant="destructive">
          <Icon name="delete" />
          删除
        </Button>
        <Button type="button" variant="ghost">
          <Icon name="copy" />
          复制
        </Button>
      </div>
      <div className="flex items-center justify-center gap-4">
        <Button type="button" variant="default" className="w-[240px]">默认按钮</Button>
        <Button type="button" variant="secondary" className="w-[240px]">次要操作</Button>
      </div>
    </div>
  )
}

多图标Icon row

三按钮Three buttons

双按钮Two buttons

撑满容器Fill container

前置图标Leading icon

图标工具条Icon toolbar

图标 + 文本工具条Icon + text toolbar

import { Button } from "@/components/ui/button"
import { Icon } from "@/daren-design/icons/Icon"
import {
  Bold,
  BookOpenText,
  Highlighter,
  Italic,
  Languages,
  List,
  ListChecks,
  ListOrdered,
  MessageSquareText,
  MoreHorizontal,
  Strikethrough,
  Underline,
} from "lucide-react"

export function ButtonSceneExample() {
  return (
    <div className="grid gap-6 max-w-[360px]">
      <div className="flex items-center gap-1">
        <Button type="button" variant="ghost" size="icon-sm" aria-label="搜索"><Icon name="search" /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="编辑"><Icon name="edit" /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="复制"><Icon name="copy" /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="下载"><Icon name="download" /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="更多"><Icon name="more" /></Button>
      </div>
                  <div className="flex items-center justify-between gap-2">
        <Button type="button" variant="link" className="px-0">添加</Button>
        <div className="flex items-center gap-2">
          <Button type="button" variant="outline">取消</Button>
          <Button type="button" variant="brand">确认</Button>
        </div>
      </div>
      <div className="grid w-full grid-cols-2 gap-2">
        <Button type="button" variant="outline" className="w-full">取消</Button>
        <Button type="button" variant="brand" className="w-full">确认</Button>
      </div>
      <div className="grid w-full gap-2">
        <Button type="button" className="w-full" variant="outline">次按钮</Button>
        <Button type="button" className="w-full" variant="destructive">删除按钮</Button>
      </div>
      <Button type="button" variant="brand"><Icon name="add" />新建</Button>
<div className="inline-flex items-center gap-0.5 rounded-md border p-0.5" role="toolbar" aria-label="图标工具条">
        <Button type="button" variant="ghost" size="icon-sm" aria-label="正文">T</Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="加粗"><Bold /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="斜体"><Italic /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="删除线"><Strikethrough /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="无序列表"><List /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="有序列表"><ListOrdered /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="任务列表"><ListChecks /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="链接"><Icon name="link" /></Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="更多"><MoreHorizontal /></Button>
      </div>
<div className="inline-flex items-center gap-0.5 rounded-md border p-0.5" role="toolbar" aria-label="图标加文本工具条">
        <Button type="button" variant="ghost" aria-label="高亮"><Highlighter />高亮</Button>
        <Button type="button" variant="ghost" aria-label="划线"><Underline />划线</Button>
        <Button type="button" variant="ghost" aria-label="批注"><MessageSquareText />批注</Button>
        <Button type="button" variant="ghost" aria-label="翻译"><Languages />翻译</Button>
        <Button type="button" variant="ghost" aria-label="解释"><BookOpenText />解释</Button>
        <Button type="button" variant="ghost" size="icon-sm" aria-label="更多"><Icon name="more" /></Button>
      </div>
    </div>
  )
}

按钮

下架组件

更新组件

升为 Stable

按钮

基础样式

状态矩阵

尺寸变体

样式变体

场景示例