Radius - Overview
Purpose
Radii (plural of Radius, but Radiuses can also be used) are used to make designs appear softer by rounding the corners of the design. To allow for consistency we support a limited amount of different radii. These are all available as Variables within Figma (under Corner Radius), and Tokens in React.
Radii sizing
| Name | Value | Usage |
|---|---|---|
| None | 0px | Used where no radius is required. |
| Extra Small (XS) | 4px | Our most common radius size. Used in all input fields and many common components. |
| Small (S) | 8px | Used for focus states to outline interactive elements that use the default radius of 4px. |
| Medium (M) | 12px | Not currently in use. |
| Large (L) | 16px | Not currently in use. |
| Full | 128px | A big value that should only be used when trying to make a corner completely rounded. |