Button 按钮

默认高度 32px，与筛选控件一致（--rd-control-height）。 业务直接使用 el-button；「主按钮 + ⋯」用 RdButtonGroupMore。 锚点对齐 Design System Showcase。

与筛选同高

筛选外壳与按钮同高对齐。

状态

全部

<script setup lang="ts">
import { ref } from 'vue'
import { Plus } from '@lucide/vue'

const statuses = ref<string[]>([])
</script>

<template>
  <div class="demo-row" style="gap:10px;align-items:center;flex-wrap:wrap">
    <div class="filter-shell" style="width:200px;flex:none">
      <span class="filter-shell__label">状态</span>
      <el-select v-model="statuses" placeholder="全部" multiple collapse-tags clearable class="filter-shell__control">
        <el-option label="跟进中" value="active" />
        <el-option label="已成交" value="won" />
      </el-select>
    </div>
    <el-button type="primary">查询</el-button>
    <el-button>重置</el-button>
    <el-button type="primary" :icon="Plus">新增</el-button>
  </div>
</template>

按钮

<template>
  <div class="demo-row">
    <el-button>默认</el-button>
    <el-button type="primary">主要</el-button>
    <el-button type="danger">危险</el-button>
    <el-button type="warning">警告</el-button>
    <el-button type="info">信息</el-button>
    <el-button type="primary" size="small">小号 28</el-button>
    <el-button type="primary" size="large">大号 36</el-button>
    <el-button type="primary" loading>加载中</el-button>
    <el-button disabled>禁用</el-button>
  </div>
</template>

按钮组

并列按钮用 el-button-group；「主按钮 + ⋯」用 RdButtonGroupMore。

<script setup lang="ts">
import { Archive, Bell, Check, Clock, FileText, Mail } from '@lucide/vue'
import { RdButtonGroupMore, toast, type RdButtonGroupMoreItem } from '@rd-element/ui'

const snoozeChildren: RdButtonGroupMoreItem[] = [
  { title: '稍后提醒', icon: Bell, disabled: true },
  { title: '标记已读', icon: Check },
  { title: '归档', icon: Archive, divided: true },
]
</script>

<template>
  <div class="demo-row" style="gap:14px;align-items:center;flex-wrap:wrap">
    <el-button-group>
      <el-button :icon="Archive" @click="toast.info('档案')">档案</el-button>
      <el-button :icon="FileText">报告</el-button>
    </el-button-group>
    <RdButtonGroupMore title="打盹" :icon="Clock" :children="snoozeChildren" />
    <RdButtonGroupMore title="发邮件" :icon="Mail" trigger="hover" :children="snoozeChildren" />
  </div>
</template>

按钮组变体

<script setup lang="ts">
import { FilePenLine, Save, Trash2 } from '@lucide/vue'
import { RdButtonGroupMore, type RdButtonGroupMoreItem } from '@rd-element/ui'

const saveMoreItems: RdButtonGroupMoreItem[] = [
  { title: '保存并继续', icon: Save },
  { title: '另存为草稿', icon: FilePenLine },
  { title: '放弃更改', icon: Trash2, divided: true },
]
</script>

<template>
  <div class="demo-row" style="gap:14px;align-items:center;flex-wrap:wrap">
    <el-button-group>
      <el-button>左对齐</el-button>
      <el-button>居中</el-button>
      <el-button>右对齐</el-button>
    </el-button-group>
    <RdButtonGroupMore type="primary" title="保存" :children="saveMoreItems" />
  </div>
</template>

列表按钮

<script setup lang="ts">
import { Download, Plus } from '@lucide/vue'
</script>

<template>
  <div class="demo-row">
    <el-button :icon="Download">导出</el-button>
    <el-button type="primary" :icon="Plus">新增客户</el-button>
    <el-button type="primary" plain>Plain</el-button>
    <el-button type="danger" plain>危险 Plain</el-button>
  </div>
</template>

筛选批量按钮

<script setup lang="ts">
import { Filter } from '@lucide/vue'
</script>

<template>
  <el-button :icon="Filter">
    全部筛选
    <span
      class="ml-1 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-(--rd-color-brand-blue) px-1.5 text-[11px] font-bold leading-none text-white"
    >2</span>
  </el-button>
</template>

API

el-button

按钮 API 见 Element Plus Button。

RdButtonGroupMore Attributes

属性名	说明	类型	默认值
title	主按钮文案；有值时渲染主按钮	string	—
icon	主按钮图标（业务传入，如 Lucide 组件）	Component	—
children	下拉子项；空则不显示 ⋯	RdButtonGroupMoreItem[]	—
type	按钮类型	'primary' | 'success' | 'warning' | 'danger' | 'info' | ''	''
size	尺寸	'large' | 'default' | 'small'	default
trigger	⋯ 下拉触发方式	'click' | 'hover'	click
ariaLabel	⋯ 按钮无障碍标签	string	'更多'
showTimeout	hover 时展开延迟（ms）	number	80
hideTimeout	hover 时收起延迟（ms）	number	120

RdButtonGroupMoreItem

children 数组元素类型。

属性名	说明	类型	默认值
title	子项文案	string	—
icon	子项图标（业务传入，如 Lucide 组件）	Component	—
onClick	点击回调；与 command 事件可并存	() => void	—
show	是否展示该子项	boolean	true
disabled	是否禁用	boolean	false
divided	项前是否显示分割线	boolean	false
command	command 事件载荷；缺省时取 title	string | number | Record<string, unknown>	—

RdButtonGroupMore Events

事件名	说明	类型
click	主按钮点击	(event: MouseEvent) => void
command	下拉项点击；载荷为 item.command ?? item.title	(cmd: string | number | Record<string, unknown>) => void

全局样式说明

引入 @rd-element/ui/dist/style.css 后，业务中所有 <el-button> / <el-button-group> 都会套用同一套皮肤。

import 'element-plus/dist/index.css'
import '@rd-element/ui/dist/style.css' // 须在 EP 样式之后

主题变量

:root {
  --rd-color-primary: #ea543f;
  --rd-control-height: 32px;
  --rd-radius-base: 8px;
  --rd-color-border-strong: #cdd1da;
}

依赖说明

• vue ^3.5.0、element-plus ^2.8.0、@lucide/vue ^1.0.0 为 peerDependencies
• 业务需引入 EP 基础样式，再引入库覆盖层