SuperAPI AI 工具集

sgds-components-icon-button

前端与建站

查看项目

更新于 10-15 21:54

技能介绍

用途:<sgds-icon-button> 是 SGDS 图标注册表中的纯图标交互按钮。当不需要可见文字标签时,应优先使用它,而不是带图标插槽的 <sgds-button>,因为它提供正确语义并强制通过 ariaLabel 做无障碍标注。

主要能力:支持 variant(primary 默认、outline、ghost)、tone(brand 默认、danger、neutral、fixed-light 用于深色背景)、size(xs、sm、md、lg,默认 md)、disabled、loading、active 等属性;设置 href 时渲染为 <a role="button"> 并可配合 target、download 实现跳转或下载;不设置 href 时渲染为 <button>。图标尺寸由按钮尺寸自动映射(xs→sm、sm→md、md→lg、lg→xl),不要单独设置图标尺寸。事件包括 sgds-blur 与 sgds-focus。

使用方式:name 为必填,取自 SGDS 图标注册表;无可见文字标签时必须提供 ariaLabel。示例:<sgds-icon-button name="plus" ariaLabel="Add item"></sgds-icon-button>。安装与框架集成(React 19+ 与 React ≤18、Vue、Angular)参见 sgds-components-setup。

适用场景:仅图标操作按钮、深色背景上的图标按钮、需要跳转或下载的图标按钮。

限制:该组件不暴露自定义属性与 CSS parts,不支持 CSS 样式修改;无插槽,图标由 name 内部渲染;name 缺失或无法识别时会记录警告且不渲染任何内容;tone="fixed-light" 需搭配深色父容器。相关组件:需要可见文字标签时使用 <sgds-button>。