Button 按钮

按钮用于开始一个即时操作，标记（或封装）一组操作命令，响应用户点击行为，触发相应的业务逻辑。

按钮用于开始一个即时操作。

何时使用

  • 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
  • 在按钮内使用图标时，请通过 size 与 icon 尺寸保持视觉平衡。

代码演示

按钮类型

按钮有 6 种类型：主按钮、次按钮、描边按钮、幽灵按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

<script setup lang="ts">
import { Button } from "@reglow/reui";
</script>

<template>
  <Button>默认按钮</Button>
  <Button variant="secondary">次要按钮</Button>
  <Button variant="outline">描边按钮</Button>
  <Button variant="ghost">幽灵按钮</Button>
  <Button variant="destructive">危险按钮</Button>
  <Button variant="link">链接按钮</Button>
</template>

按钮尺寸

按钮有大、中、小三种尺寸，以及对应的纯图标尺寸。通过 size 属性控制。

<script setup lang="ts">
import { Button } from "@reglow/reui";
import { Plus } from "lucide-vue-next";
</script>

<template>
  <Button size="sm">小号按钮</Button>
  <Button>默认按钮</Button>
  <Button size="lg">大号按钮</Button>

  <Button size="icon-sm"><Plus /></Button>
  <Button size="icon"><Plus /></Button>
  <Button size="icon-lg"><Plus /></Button>
</template>

图标按钮

当需要在按钮内嵌入图标时，可以在文字前或后放置图标。

<script setup lang="ts">
import { Button } from "@reglow/reui";
import { Plus, Search, Trash2, Download, Heart, Settings } from "lucide-vue-next";
</script>

<template>
  <Button><Plus />新建</Button>
  <Button variant="outline"><Search />搜索</Button>
  <Button variant="secondary"><Download />下载</Button>
  <Button variant="destructive"><Trash2 />删除</Button>
  <Button variant="ghost"><Heart />收藏</Button>
  <Button variant="link"><Settings />设置</Button>
</template>

禁用状态

添加 disabled 属性即可让按钮处于不可用状态，按钮样式也会自动改变。

<script setup lang="ts">
import { Button } from "@reglow/reui";
</script>

<template>
  <Button disabled>默认禁用</Button>
  <Button variant="secondary" disabled>次要禁用</Button>
  <Button variant="outline" disabled>描边禁用</Button>
  <Button variant="ghost" disabled>幽灵禁用</Button>
  <Button variant="destructive" disabled>危险禁用</Button>
  <Button variant="link" disabled>链接禁用</Button>
</template>

导入

import { Button } from "@reglow/reui";
// 或子路径
import { Button } from "@reglow/reui/ui/button";

API

Button

属性说明类型默认值
variant视觉变体"default" | "secondary" | "outline" | "ghost" | "destructive" | "link""default"
size尺寸"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg""default"
disabled是否禁用booleanfalse
as渲染元素（reka-ui Primitive）string | Component"button"
as-child以子元素为根（用于包裹 RouterLink 等）booleanfalse

插槽

插槽说明
default按钮内容（文字 / 图标）
国际化
ReUI 内置轻量响应式 i18n 系统，组件内全部界面文案（占位符、按钮、空状态等）均接入，切换语言即时生效。
Divider 分割线
区隔内容的分割线