Button 按钮
触发一个操作。导航类的「操作」请给 href，组件会渲染成 <a>，样式不变。
变体
九种变体覆盖从高强调到静默的全部层级。深色底的三档用白字，其余走正文档。
<pt-button variant="default">高强调</pt-button>
<pt-button variant="brand">品牌</pt-button>
<pt-button variant="secondary">次要</pt-button>
<pt-button variant="tertiary">第三级</pt-button>
<pt-button variant="ghost">幽灵</pt-button>
<pt-button variant="destructive">危险</pt-button>
<pt-button variant="link">链接</pt-button>尺寸
三档控件刻度：24 / 32 / 40。高度、字号、图标尺寸是联动的。
<pt-button size="sm">小</pt-button>
<pt-button size="md">中</pt-button>
<pt-button size="lg">大</pt-button>加载与禁用
加载中时内容留在原位只是变透明，按钮宽度不会在加载前后跳变。
<pt-button loading>提交中</pt-button>
<pt-button disabled>不可用</pt-button>下载
给了 href 的按钮再加 download，就是一个下载链接。download=""（空字符串）同样生效， 表示用服务端 / URL 给的默认文件名；不写这个属性才是正常导航。禁用或加载中时按钮退化成 <button>，download 随之失效。
下载
download 透传给内部的 <a download>，只在有 href 且未禁用时生效。空字符串表示用默认文件名。
<pt-button href="data:text/plain,ptengine" download="ptengine.txt">下载 ptengine.txt</pt-button>
<pt-button variant="secondary" href="data:text/plain,ptengine" download="">默认文件名</pt-button>横向内边距
--pt-button-padding-x 覆盖三档尺寸的默认横向内边距（sm 8px / md 12px / lg 16px）。 变量在使用处兜底、不在宿主上声明，所以设在祖先容器上就能作用到一排按钮：
html
<div style="--pt-button-padding-x: 24px">
<pt-button>确定</pt-button>
<pt-button variant="secondary">取消</pt-button>
</div>纯图标按钮（icon-only）与 link 变体的内边距恒为 0，不受它影响。
表单提交
type="submit" 时会提交外层 <form>。Shadow DOM 里的按钮本来做不到这点 —— 事件到了影子边界就不再触发表单的默认行为 —— 组件通过 ElementInternals 找到宿主表单并调用 requestSubmit()（不是 submit()，后者会跳过表单校验）。
html
<form>
<pt-input name="q"></pt-input>
<pt-button type="submit">提交</pt-button>
</form>无障碍
纯图标按钮必须给 aria-label，否则读屏用户只会听到「按钮」：
html
<pt-button icon-only aria-label="关闭">
<svg>…</svg>
</pt-button>API
属性
| 属性 | Attribute | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
ariaLabelText | aria-label | string | undefined | — | 无障碍名称：原生 HTML 里写 aria-label，React / Vue / Angular 包装层里属性名是 ariaLabelText。 纯图标按钮**必须**给，否则读屏用户只会听到「按钮」。 |
disabled | disabled | boolean | false | 禁用 |
download | download | string | undefined | — | 下载链接：透传给 <a download>，仅在 href 存在且未禁用时有效。 空字符串也会透传（`download=""`），表示用服务端 / URL 给的默认文件名； 不写这个属性才是「不下载，正常导航」。 |
fullWidth | full-width | boolean | false | 撑满父容器宽度 |
href | href | string | undefined | — | 给了 href 就渲染成 <a>，按钮样式不变（导航类操作用它，别用 button + onClick 跳转） |
iconOnly | icon-only | boolean | false | 纯图标按钮：宽高相等，无横向内边距。图标放默认插槽 |
inheritedDisabled | inherited-disabled | boolean | false | 外层 pt-field-set 下发的禁用。内部继承通道：由它以 attribute 维护，不建议使用方直接写。 有效禁用是 `disabled` 与它的并集；父元素只写这一条、不碰 `disabled`，读 `el.disabled` 得到的始终是使用方自己写的值 |
loading | loading | boolean | false | 加载中：视觉上换成转圈，同时按钮不可点 |
rel | rel | string | undefined | — | 仅在 href 存在时有效；target="_blank" 时若未指定会自动补 noreferrer |
size | size | "lg" | "md" | "sm" | 'md' | 尺寸档位。三档对应 24 / 32 / 40 的控件刻度 |
target | target | "_blank" | "_parent" | "_self" | "_top" | undefined | — | 仅在 href 存在时有效 |
type | type | "button" | "reset" | "submit" | 'button' | 原生 button 的 type；设为 submit / reset 时会作用到外层 form |
variant | variant | "brand" | "default" | "destructive" | "ghost" | "ghost-destructive" | "link" | "secondary" | "secondary-destructive" | "tertiary" | 'default' | 视觉变体 |
方法
| 方法 | 说明 |
|---|---|
setFocus(options?: FocusOptions) => Promise<void> | 让按钮获得焦点 |
插槽
| 名称 | 说明 |
|---|---|
（默认） | 按钮文案 |
end | 文案后的图标 |
start | 文案前的图标 |
可定制的内部元素（::part()）
| part | 说明 |
|---|---|
base | 内部的 button / a 元素 |
end | 后置图标容器 |
start | 前置图标容器 |
CSS 变量
| 变量 | 说明 |
|---|---|
--pt-button-min-width | 最小宽度，默认 auto |
--pt-button-padding-x | 横向内边距，默认取控件档位（sm 8px / md 12px / lg 16px）；纯图标与 link 变体恒为 0，不受它影响 |
--pt-button-radius | 圆角，默认取控件档位（md / lg 为 --pt-radius-md，sm 为 --pt-radius-sm） |