Button 按钮

新粗野主义风格的按钮组件，支持 9 种变体、4 种尺寸 + icon 模式、加载状态和 asChild 组合支持。

预览

Preview

变体

尺寸

状态

提交按钮

安装

pnpm dlx brutx-vue@latest add button

用法

<script setup>
import { Button } from 'brutx-ui-vue'
</script>

<template>
    <Button variant="primary" size="default">
        Click me
    </Button>
</template>

加载状态

<script setup>
import { ref } from 'vue'
import { Button } from 'brutx-ui-vue'

const isLoading = ref(false)

async function handleSubmit() {
    isLoading.value = true
    await new Promise(resolve => setTimeout(resolve, 2000))
    isLoading.value = false
}
</script>

<template>
    <Button variant="primary" :loading="isLoading" @click="handleSubmit">
        Save Changes
    </Button>
</template>

禁用状态

<script setup>
import { Button } from 'brutx-ui-vue'
</script>

<template>
    <Button variant="primary" disabled>
        Disabled
    </Button>
</template>

提交按钮与等待文本

通过 type="submit" 将按钮渲染为表单提交按钮。配合 loading 与 pendingText 可在提交期间显示等待文本（替换插槽内容），未传入 pendingText 时回退到 i18n 默认值（submitButton.submitting）：

<script setup>
import { ref } from 'vue'
import { Button } from 'brutx-ui-vue'

const isLoading = ref(false)

async function handleSubmit() {
    isLoading.value = true
    await new Promise(resolve => setTimeout(resolve, 2000))
    isLoading.value = false
}
</script>

<template>
    <form @submit.prevent="handleSubmit">
        <Button type="submit" variant="primary" :loading="isLoading" pending-text="保存中...">
            保存
        </Button>
    </form>
</template>

仅当 type="submit" 且 loading=true 时才会显示等待文本并隐藏插槽内容；其他情况下插槽内容照常渲染，加载图标仍然显示。

asChild

使用 asChild 将按钮样式渲染到自定义元素上（例如路由链接）：

<script setup>
import { Button } from 'brutx-ui-vue'
import { RouterLink } from 'vue-router'
</script>

<template>
    <Button as-child>
        <RouterLink to="/about">About</RouterLink>
    </Button>
</template>

故障效果

Button 内置 effect="glitch"，可直接启用故障撕裂动画。

<template>
    <Button
        effect="glitch"
        variant="primary"
        glitch-trigger="click"
        glitch-speed="fast"
        glitch-direction="both"
        data-text="GLITCH"
    >
        GLITCH
    </Button>
</template>

变体

变体	说明
default	背景色，硬阴影
primary	Primary（珊瑚色）背景
secondary	Secondary（薄荷青）背景
accent	Accent（黄色）背景
danger	Destructive（红色）背景，白色文字
success	Success（绿色）背景
outline	透明背景，悬停时反转
ghost	无边框和阴影，柔和悬停效果
link	无边框和阴影，悬停时显示下划线

<template>
    <Button variant="primary">Primary 变体</Button>
</template>

尺寸

尺寸	高度	内边距	字体大小
sm	h-9	px-3 py-1	text-sm
default	h-11	px-5 py-2	text-base
lg	h-14	px-8 py-3	text-lg
xl	h-16	px-10 py-4	text-xl
icon	h-11 w-11	p-0	—

Props

属性	类型	默认值	说明
variant	'default' | 'primary' | 'secondary' | 'accent' | 'danger' | 'success' | 'outline' | 'ghost' | 'link'	'default'	按钮变体样式
size	'sm' | 'default' | 'lg' | 'xl' | 'icon'	'default'	按钮尺寸，icon 为正方形图标按钮
asChild	boolean	false	将按钮样式渲染到子元素上，用于组合路由链接等
type	'button' | 'submit' | 'reset'	undefined	原生 button 类型；为 submit 时启用 pendingText 行为
loading	boolean	false	显示加载动画并禁用按钮
disabled	boolean	false	禁用按钮
pendingText	string	undefined（回退到 i18n submitButton.submitting）	加载中显示的等待文本，仅在 type="submit" 且 loading 时生效
effect	'none' | 'glitch'	'none'	可选视觉效果
glitchTrigger	'hover' | 'click' | 'autoplay' | 'none'	'hover'	故障动画触发方式，仅在 effect="glitch" 时生效
glitchInterval	number	3000	自动播放间隔（毫秒），仅在 glitchTrigger="autoplay" 时生效
glitchSpeed	'slow' | 'medium' | 'fast'	'medium'	故障动画速度
glitchDirection	'horizontal' | 'vertical' | 'both'	'horizontal'	故障撕裂方向
class	string	undefined	自定义 CSS 类名

事件

按钮组件会传播所有原生 DOM 事件（如 click、mouseenter 等），无需额外配置。

事件	参数	说明
click	MouseEvent	点击按钮时触发，加载或禁用状态时不触发

插槽

插槽	作用域	说明
default	—	按钮内容

可访问性

• 键盘操作：支持 Space / Enter 触发点击
• ARIA 属性：禁用状态自动设置 disabled 属性（非 asChild 模式）或 aria-disabled="true"（asChild 模式）；加载状态自动设置 aria-busy="true"
• 焦点管理：支持键盘导航和焦点样式（focus:outline）