Radius Tokens

圆角 Token 系统,定义了不同层级的圆角大小,为界面元素提供统一且柔和的视觉效果。

基础用法

Tip

点击卡片可复制 token 名称

rounded-xs
2px
Preview
Border Radius2px
rounded-sm
4px
Preview
Border Radius4px
rounded
8px
Preview
Border Radius8px
rounded-md
8px
Preview
Border Radius8px
rounded-lg
12px
Preview
Border Radius12px
rounded-xl
16px
Preview
Border Radius16px
rounded-full
9999px
Preview
Border Radius9999px

设计规范

圆角层级

系统提供 7 个圆角层级,从极小圆角 (2px) 到完全圆角 (9999px),适用于各种 UI 元素:

TokenValue使用场景
rounded-xs2px极小圆角,用于细微的边角处理
rounded-sm4px小圆角,用于标签、徽章等小元素
rounded8px默认圆角,用于卡片、按钮等常规元素
rounded-md8px中等圆角,与 rounded 相同
rounded-lg12px大圆角,用于较大的卡片和容器
rounded-xl16px超大圆角,用于弹窗、模态框等
rounded-full9999px完全圆角,用于头像、圆形按钮

使用指南

  1. 保持一致性:同一类型的元素应使用相同的圆角值
  2. 层级关系:圆角大小应与元素尺寸成正比
  3. 视觉平衡:过大的圆角在矩形元素上可能显得突兀

设计建议

选择合适的圆角

  • 小元素 (按钮、标签):使用 rounded-smrounded
  • 中等元素 (卡片、面板):使用 roundedrounded-lg
  • 大元素 (弹窗、容器):使用 rounded-lgrounded-xl
  • 圆形元素 (头像、图标):使用 rounded-full

组合使用

// 按钮使用默认圆角
<button className="rounded">按钮</button>

// 卡片使用大圆角
<div className="rounded-lg">卡片内容</div>

// 头像使用完全圆角
<img className="rounded-full" src="avatar.jpg" />