React · 设计基础

Border 边框

统一边框宽度、线型、圆角和焦点轮廓。

边框层级

边框表达结构和状态,不用于装饰性堆叠。

基础边框

常规控件与容器边界

弱边框

低强调分区

强边框

悬停、焦点前置状态

圆角层级

按控件密度选择圆角,同一组件族保持一致。

小圆角

紧凑控件

默认圆角

按钮、输入框与卡片

大圆角

大型面板

线型与宽度

线型表达不同交互含义,宽度继续使用统一边框 Token,不在组件内写死色值。

实线

默认结构边界

虚线

可投放、可新增区域

点线

弱提示与辅助参考

焦点轮廓

键盘焦点使用统一轮廓 Token,不能通过移除 outline 隐藏可操作元素的位置。