Button

通用按钮,样式由 CSS 变量 + 三种 variant 驱动。包内默认 --btn-bg-color 为黄色占位,实际使用时几乎都通过 btn-bg-* 工具类或 :style 覆写——下方所有示例都展示了覆写后的效果。

基本用法

品牌紫(典型用法)

<script setup lang="ts">
import { Button } from '@tripo3d/design';
</script>

<template>
  <Button class="h-10 w-40 font-bold btn-bg-purple-1 btn-text-white btn-shadow-purple-1">
    按钮
  </Button>
</template>

覆写颜色的三种方式

1. 预设工具类:btn-bg-purple-1 / btn-text-white / btn-shadow-purple-1(从 @tripo3d/design/preset 取色)
2. 任意值语法:btn-bg-[#6366f1] / btn-shadow-[#6366f1]
3. inline style::style="{ '--btn-bg-color': '#22c55e' }"(不依赖 UnoCSS)

变体

variant="default"

default(默认)

实心填充,默认占位色为黄色,通常通过 btn-bg-* 覆写。

<Button>默认黄色</Button>
<Button class="btn-bg-purple-1 btn-text-white btn-shadow-purple-1">紫色</Button>
<Button class="btn-bg-blue-1 btn-text-white btn-shadow-blue-1">蓝色</Button>
<Button class="btn-bg-green-1 btn-text-black btn-shadow-green-1">绿色</Button>

variant="border"

border

镂空风格,边框色与文字色同步,通过 btn-border-* 覆写。

<Button variant="border">默认</Button>
<Button variant="border" class="btn-border-purple-1 btn-shadow-purple-1">紫色</Button>
<Button variant="border" class="btn-border-blue-1 btn-shadow-blue-1">蓝色</Button>

variant="custom"

custom

完全交给 class 控制——不带任何内置背景/边框,适合渐变、特效等定制场景。

<Button
  variant="custom"
  class="h-10 w-40 font-bold rounded-3 text-white"
  :style="{ background: 'linear-gradient(135deg, #503be3, #fb23c2)' }"
>
  渐变按钮
</Button>

状态

禁用 / 加载

<Button disabled>禁用</Button>
<Button loading>加载中</Button>

loading 自动把 disabled 设为 true,叠加流光动画与渐变光晕。

inline style 覆写

不依赖 UnoCSS 时,直接设 CSS 变量:

:style 直写变量

任意 CSS 颜色都可以,适合调试或运行时主题切换。

<Button
  :style="{
    '--btn-bg-color': '#22c55e',
    '--btn-text-color': '#000',
    '--btn-hover-shadow-color': '#22c55e',
  }"
>
  自定义绿色
</Button>

API

Props

名称	类型	默认值	说明
as	AsTag	'button'	渲染的 HTML 标签,可设为 a、div 等
variant	'default' | 'border' | 'custom'	'default'	按钮变体
disabled	boolean	—	禁用态,使用降低透明度 + not-allowed 光标
loading	boolean	—	加载态,自动 disabled 并添加流光动画
class	string	—	内容层 class,用于覆写颜色 / 尺寸
backgroundClass	string	—	背景层独立 class
wrapperClass	string	—	最外层容器 class

Slots

插槽	作用域	说明
default	—	按钮内容,通常为文本或图标

CSS 变量

CSS 变量	默认值	说明
--btn-bg-color	rgba(249, 207, 0, 1)	default 变体的背景色(包内默认黄色,使用时通过 btn-bg-* 覆写)
--btn-text-color	rgba(0, 0, 0, 1)	default 变体的文字色
--btn-border-color	rgba(249, 207, 0, 1)	border 变体的边框色 / 文字色
--btn-hover-shadow-color	rgba(249, 207, 0, 1)	hover 时的发光颜色
--btn-loading-border-color	—	loading 状态的边框色
--btn-loading-from / --btn-loading-via / --btn-loading-to	—	loading 背景渐变(三段)
--btn-shimmer-color	—	loading 流光高光颜色
--btn-shimmer-text-base	—	loading 文字基础色

可访问性

• 渲染为原生 <button>(默认 as='button'),天然支持 Enter / Space 键激活
• disabled / loading 状态下自动禁用交互,not-allowed 光标提示
• 若改为链接场景,请使用 as="a" 并提供 href,以保留屏幕阅读器语义