Guideline · Components · Tokens · Motion

GUIDELINE.

设计规范:组件库预览与原子样式令牌。

Buttons
Button · variant / size · 毛玻璃预览区
button

Variant

default

主操作:表单提交、保存、确认等页面核心 CTA

outline

次要操作:取消、返回、与主按钮并列的备选动作

ghost

低强调:工具栏、表格行内、侧栏等轻量可点击项

destructive

危险操作:删除账号、清空数据等不可逆行为

secondary

中性操作:筛选、导出、辅助流程,优先级低于 default

link

链接式入口:查看详情、跳转文档,视觉权重最低

Size

sm · h-8 px-3 text-xs

紧凑区、卡片内、表格工具栏

default · h-9 px-4

常规表单与对话框默认尺寸

lg · h-10 px-8

落地页 Hero、强调单一主行动

icon · size-9

纯图标操作,必须配 aria-label

Input
Input · Field · Badge · Disabled · Invalid · File · Inline · Grid · Required
input

Basic

Field

Choose a unique username for your account.

Disabled

This field is currently disabled.

Invalid

Enter text to trigger validation (min 3 chars).

File

Select a picture to upload.

Required

This field must be filled out.

Inline

Grid

Badge

Badge
Badge · Variants · With Icon · With Spinner · Link
badge

Variants

Default
Secondary
Destructive
Outline

With Icon

Verified
Bookmark

With Spinner

Deleting
Generating
Toggle
Toggle · Outline · With Text · Size · Disabled
toggle

Outline

With Text

Size

Disabled

Card
CardHeader / CardTitle / CardDescription / CardContent / CardFooter
container
Hover Lift
悬停时 -4px 抬升 + 边框变深。常用于可点击卡片。
STATIC
不带 hover 的静态卡片,用于纯信息展示。
Sonner
Toaster · Types · Description · Position
sonner

Types

toast()

中性反馈,无语义色,适合一般通知

toast.success()

保存、复制、提交成功等正向结果

toast.error()

接口错误、校验失败、权限不足

toast.warning()

即将过期、配额不足、非阻断风险提示

toast.info()

功能说明、版本更新、引导提示

toast.message()

重置、切换状态等低优先级反馈

toast.loading()

异步请求进行中,完成后需 toast.dismiss(id)

Description

description

推荐:标题一句话 + description 补充上下文

title only

轻量场景:复制、点赞等无需副文案

description

长文本自动换行,避免超过两行时考虑 Dialog

Position

全局默认 bottom-right(layout Toaster);单条可通过 { position } 覆盖。