组件 · 动作 · 01
按钮 按钮 = 带文字标签的控件，有固定高度、圆角，以及默认、悬停、按下、聚焦、禁用五种状态。
直达修改 Prompt →
Primary Secondary Outline Ghost Destructive Loading 怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a modern UI button system.
STYLE
- 12px corner radius
- ink fill for primary
- hairline border for secondary
STATES
- hover, active, disabled, loading
ACCESSIBILITY
- 4.5:1 contrast
- visible focus ring
Change the existing primary button to a ghost button.
Use:
- transparent background, no fill
- accent-colored text label
- subtle hover state (light tint, no lift)
- visible focus ring
Keep the existing size, position and label unchanged.
Only modify the button's visual treatment.
Replace the existing CTA with a primary button.
Requirements:
- 12px corner radius, 44px height (comfortable touch target)
- ink fill, white label, optional leading icon
- hover: 1px lift with a soft shadow
- focus: visible 2px focus ring
- disabled: dimmed, cursor not-allowed
- loading: spinner replaces the label and blocks re-click
- full width below 480px
Keep the surrounding layout unchanged.
MOTION
- Hover and focus: 120ms ease-out, colour and shadow only. No lift, no scale.
- Press: scale(0.96) over 100ms. Never below 0.95.
- Loading: spinner swaps in at 150ms; the label keeps its width so the button does not resize.
- Disabled: no transition. prefers-reduced-motion: colour change only, no transform.
修改类 Prompt 只动目标，不碰页面其余部分。
按钮是什么？ 按钮用来提交一次操作。说不清类型、圆角、悬停、禁用和加载，模型就会发明一颗通用胶囊。
变体 点击属性即可在预览中高亮。
主按钮 主操作，用最重的颜色填充。先确定它，它决定整组按钮的视觉权重。
次按钮 次要操作，通常是描边或浅填充，置于主按钮旁。
描边 仅描边、无填充的按钮，用于次要或三级操作。
幽灵 几乎无边框的按钮，悬停前融入背景。
危险 确认不可撤销或破坏性操作（删除、移除），通常为红色。
图标 仅含单个图标、无文字的按钮，必须配 aria-label。
加载 操作进行中显示进度并禁止重复点击，禁用控件并替换为加载指示。
圆角 组件的圆角程度，用 px 数值而非「圆一点」。
阴影 层次（elevation）提示：投影的偏移、模糊与透明度。
悬停 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
禁用 不可交互的控件，置灰且不可聚焦。
加载 操作进行中显示进度并禁止重复点击，禁用控件并替换为加载指示。
对比度 文字与元素的对比度，正文目标 4.5:1。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
悬停 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
聚焦 键盘聚焦状态：清晰的焦点环或边框变化，永远不要去掉。
禁用 不可交互的控件，置灰且不可聚焦。
加载 操作进行中显示进度并禁止重复点击，禁用控件并替换为加载指示。 结构解剖 这些是 Prompt 里应该点名的部件。
01 容器 02 文字标签 03 图标 04 焦点环 什么时候用 表单主提交：保存、注册、支付 首屏或导航栏里的唯一主 CTA 对话框中的主确认操作 什么时候别用 低强调的跳转——改用链接 没有二次确认的危险操作——用危险变体 同一屏出现多个主按钮 复制 Prompt Create a modern UI button system.
STYLE
- 12px corner radius
- ink fill for primary
- hairline border for secondary
STATES
- hover, active, disabled, loading
ACCESSIBILITY
- 4.5:1 contrast
- visible focus ring