角丸
角丸トークンは、要素の境界の外側の角を丸めるために使います。
CSSではborder-radiusを指しています。
セマンティックトークン
| トークン名 | 値(px) |
|---|---|
s | 4px |
m | 6px |
l | 8px |
full | 10000px |
s
操作の対象となる極めて小さな要素に使います。
コンポーネント内部での使用例:Pagination
m
操作の対象となる要素に使います。
コンポーネント内部での使用例:Button、Input、Select
l
視覚的グルーピングのための矩形に、影または罫線をつける場合に使います。
コンポーネント内部での使用例:Base
full
操作の対象となる要素、または、ラベルやタグを表現するためにテキストを囲む要素を円形またはピル形にしたい場合に使います。
コンポーネント内部での使用例:Badge、Chip、RadioButton、Switch