Radius

Property will increase the element consistency and visibility

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.

Token Name	Rounded	Pixels
`radius1`	0.125 rem	2px
`radius2`	0.25 rem	4px
`radius3`	0.375 rem	6px
`radius4`	0.5 rem	8px
`radius5`	0.75 rem	12px
`radius6`	1 rem	16px
`radius7`	1.5 rem	24px
`radius8`	50%	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 Elements

  <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>