角丸

角丸トークンは、要素の境界の外側の角を丸めるために使います。

CSSではborder-radiusを指しています。

セマンティックトークン

トークン名値(px)
s4px
m6px
l8px
full10000px

s

操作の対象となる極めて小さな要素に使います。

コンポーネント内部での使用例:Pagination

m

操作の対象となる要素に使います。

コンポーネント内部での使用例:Button、Input、Select

l

視覚的グルーピングのための矩形に、影または罫線をつける場合に使います。

コンポーネント内部での使用例:Base

full

操作の対象となる要素、または、ラベルやタグを表現するためにテキストを囲む要素を円形またはピル形にしたい場合に使います。

コンポーネント内部での使用例:Badge、Chip、RadioButton、Switch