Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Foundation

Radius

Property will increase the element consistency and visibility

banner-Radius

Usage

Radius is the blunt part of the corner of a component that affects the shape and visibility of the content inside. This is the variant of radius we use globally for property the component. You can chek out the guideline for more detail description.

import { legionTheme } from "@legion-ui/core";

Preview

Please note that each value of the radius property is determined by the token from each theme.

ShapeToken NameRoundedPixels
radius10.125 rem2px
radius20.25 rem4px
radius30.375 rem6px
radius40.5 rem8px
radius50.75 rem12px
radius61 rem16px
radius71.5 rem24px
radius850%50%

There are two ways on how you can use the radius toolkit. First by using Legion V2’s components and second by using HTML elements.

Component

For Legion V2 usage, please refer to each component’s documentation page for more information.

<Box radius="radius1">...</Box>
<Box radius="radius2">...</Box>
<Box radius="radius3">...</Box>
<Box radius="radius4">...</Box>
<Box radius="radius5">...</Box>
<Box radius="radius6">...</Box>
<Box radius="radius7">...</Box>
<Box radius="radius8">...</Box>

HTML

<div style={{ borderRadius: `${legionTheme.tokens.radius1}px` }}>...</div>
<div style={{ borderRadius: `${legionTheme.tokens.radius2}px` }}>...</div>
<div style={{ borderRadius: `${legionTheme.tokens.radius3}px` }}>...</div>
<div style={{ borderRadius: `${legionTheme.tokens.radius4}px` }}>...</div>
<div style={{ borderRadius: `${legionTheme.tokens.radius5}px` }}>...</div>
<div style={{ borderRadius: `${legionTheme.tokens.radius6}px` }}>...</div>
<div style={{ borderRadius: `${legionTheme.tokens.radius7}px` }}>...</div>
<div style={{ borderRadius: `${legionTheme.tokens.radius8}px` }}>...</div>