chenzy-design

用户使用按钮来触发一个操作或者进行跳转。

代码演示

如何引入

import { Button, ButtonGroup, SplitButtonGroup } from '@chenzy-design/svelte';

按钮类型

按钮支持以下类型：

主按钮（primary，默认）
次要按钮（secondary）
第三按钮（tertiary）
警告按钮（warning）
危险按钮（danger）

关于类型字体色值

按钮的字体色值使用的都是 CSS Variables，分别为：

var(--cd-color-primary)：主要
var(--cd-color-secondary)：次要
var(--cd-color-tertiary)：第三
var(--cd-color-warning)：警告
var(--cd-color-danger)：危险

你可以直接使用这些主题色定义你的元素。

主要次要第三警告危险

按钮主题

目前可用的主题（theme）为：

light：浅色背景
solid：深色背景
borderless：无背景
outline：边框模式

默认的主题为 light。

浅色背景

深色背景

无背景

边框模式

尺寸

默认定义了三种尺寸：

大：large
默认：default
小：small

块级按钮

块级按钮具有预先定义好的宽度，它的宽度与按钮里面内容的宽度无关。

图标按钮

可定义按钮的图标。图标通过 icon snippet 传入，iconPosition 控制图标相对文字的位置。纯图标按钮（无文字）自动收成方形，需提供 aria-label。

默认状态：

禁用状态：

复合类型：

更改主题：

更改图标位置：

链接按钮

我们推荐使用 Typography 的 link 属性来实现链接型的文字按钮，具体用法详见 Typography。

链接文本

打开网站

带下划线的网页链接

禁用状态

加载状态

按钮支持加载状态，通过设置 loading 参数值为 true 即可，注意：disabled 状态优先级高于 loading 状态。

AI 风格 - 多彩按钮

设置 colorful 即可获得多彩按钮，多彩按钮支持所有的 theme，type 仅支持 primary 及 tertiary。

按钮组合

可以将多个按钮放入 ButtonGroup 的容器中，通过设置 size、disabled、type 可统一设置按钮组合中的按钮尺寸、是否禁用和类型。

组合尺寸

组合禁用

组合类型

分裂按钮组合

在 Button 和 Dropdown 结合的场景下，可以使用分裂按钮，分裂按钮添加了按钮之间的间隔，并改变了按钮的边框圆角。

基础使用

API 参考

Button

属性	说明	类型	默认值
aria-label	按钮的无障碍标签（对齐 Semi `aria-label`）；纯图标按钮必填	string	-
block	将按钮设置为块级按钮	boolean	false
circle	圆形按钮（`border-radius: 50%`），配合 icon-only 呈正圆	boolean	false
class	根元素自定义类名	string	-
colorful	多彩按钮，`type` 仅 `primary` / `tertiary` 生效	boolean	false
contentClassName	内容区域（`.cd-button-content`）自定义类名	string	-
disabled	禁用状态	boolean	false
htmlType	设置 `button` 原生的 `type` 值，可选值：`button`、`reset`、`submit`	string	‘button’
icon	图标	Snippet	-
iconPosition	图标位置，可选值：`left` \| `right`	string	‘left’
iconSize	图标尺寸（作用在图标元素上，需搭配 `icon` 使用）	IconSize	-
iconStyle	图标内联样式（作用在图标元素上，需搭配 `icon` 使用）	string	-
loading	加载状态	boolean	false
noHorizontalPadding	设置水平方向是否去掉内边距，只对设置了 icon 的 Button 有效。可选值：`true`（等效于 `['left', 'right']`）、`'left'`、`'right'`、`['left', 'right']`	boolean \| string \| Array	false
size	按钮大小，可选值：`large`、`default`、`small`	string	‘default’
style	自定义样式	string	-
theme	按钮主题，可选值：`solid`（有背景色）、`borderless`（无背景色）、`light`（浅背景色）、`outline`（边框模式）	string	‘light’
type	类型，可选值：`primary`、`secondary`、`tertiary`、`warning`、`danger`	string	‘primary’
onclick	单击事件	`(e: MouseEvent) => void`	-
onmousedown	鼠标按下事件	`(e: MouseEvent) => void`	-
onmouseenter	鼠标移入事件	`(e: MouseEvent) => void`	-
onmouseleave	鼠标移出事件	`(e: MouseEvent) => void`	-

事件 prop 使用原生小写命名（onclick 而非 onClick）；无障碍名用 aria-label（camelCase）而非 aria-label 属性。其余原生属性（data-*、name、value、form、title、tabindex 等）透传到根 button。

ButtonGroup

属性	说明	类型	默认值
aria-label	按钮组的无障碍标签	string	-
class	自定义类名	string	-
colorful	多彩按钮，透传给组内 Button	boolean	false
disabled	禁用状态	boolean	false
size	按钮大小，可选值：`large`、`default`、`small`	string	‘default’
style	自定义样式	string	-
theme	按钮主题，可选值：`solid`、`borderless`、`light`、`outline`	string	‘light’
type	类型，可选值：`primary`、`secondary`、`tertiary`、`warning`、`danger`	string	‘primary’

组级 size / type / theme / disabled / colorful 经 context 透传为组内 Button 的默认值；组内单个 Button 显式设置对应 prop 时始终优先。

SplitButtonGroup

属性	说明	类型	默认值
aria-label	分裂按钮组的无障碍标签	string	-
class	自定义类名	string	-
style	自定义样式	string	-

无障碍

ARIA

aria-label 用于表示按钮的作用，对于图标按钮，我们推荐使用此属性。
aria-disabled 与 disabled 属性同步，表示按钮禁用。
加载状态下 aria-busy="true"。

键盘和焦点

Button 的焦点管理与原生 button 一致，键盘用户可以使用 Tab 及 Shift + Tab 切换焦点。
Button 的触发与原生 button 一致，当按钮聚焦时，可以通过 Enter 或 Space 键激活。
ButtonGroup 中的按钮与单个按钮的焦点管理方式一致，可以通过 Tab 以及 Shift + Tab 进行切换。

文案规范

按钮需要清晰可预测，用户应该能够预测他们点击按钮时会发生什么。
按钮应该总是以鼓励行动的强动词开头。
为了给用户提供足够的上下文，在按钮上使用 {动词}+{名词} 内容公式；除了常见的动作，如「完成」「关闭」「取消」或「确定」。

✅ 推荐用法	❌ 不推荐用法
申请权限	申请

当按钮和其他组件一起时候，如果其他组件（比如 Modal 和 SideSheet）已经提供了足够信息的上下文的话，按钮可以只展示 {动词}，如「添加」「新建」。
始终按句子大小写（Sentence case）原则书写。

✅ 推荐用法	❌ 不推荐用法
新建项目	新建新建一个项目
编辑资料	编辑

FAQ

为什么 Button 中的 icon 属性不起作用？ 请检查你的 Button import 路径，正确的引入应为 import { Button } from '@chenzy-design/svelte';。同时注意 icon 接收的是 snippet（{#snippet ...} 或 icon={someSnippet}），而非普通字符串或元素。
loading 和 disabled 同时设置时以哪个为准？ disabled 优先级更高：同时为 true 时按钮不可点击且不展示加载态。提交类操作建议只在请求期间设 loading。

设计变量

animation

color

font

height

other

radius

spacing

width

变量	默认值	用法
--cd-animation-duration-button-icon-custom-loading	1600ms	自定义指示器旋转一周时长（对齐 Semi 1600ms）
--cd-animation-duration-button-icon-loading	600ms	加载图标容器旋转一周时长（对齐 Semi 600ms）
--cd-transition-delay-button-borderless-bg	var(--cd-motion-delay-none)	无边框按钮-背景色-延迟时间
--cd-transition-delay-button-danger-bg	var(--cd-motion-delay-none)	危险按钮-背景色-延迟时间
--cd-transition-delay-button-danger-border	var(--cd-motion-delay-none)	危险按钮-边框-延迟时间
--cd-transition-delay-button-light-bg	var(--cd-motion-delay-none)	浅色按钮-背景色-延迟时间
--cd-transition-delay-button-light-border	var(--cd-motion-delay-none)	浅色按钮-边框-延迟时间
--cd-transition-delay-button-primary-bg	var(--cd-motion-delay-none)	主要按钮-背景色-延迟时间
--cd-transition-delay-button-primary-border	var(--cd-motion-delay-none)	主要按钮-边框-延迟时间
--cd-transition-delay-button-secondary-bg	var(--cd-motion-delay-none)	次要按钮-背景色-延迟时间

显示第 1 条-第 10 条，共 41 条