Radius - Examples in use
None (0px)
Only a few components use no radius on their corners. The Table component has sharp corners on all of its rows.
| RowHeader | Cell Content | Cell Content |
|---|
Extra Small (4px)
The most common usage of radii, shown here on Button, Card and Thumbnail image used within the Product Card component.
Title of product
Content area for additional card details.
£XX a month
Small (8px)Focus states use a 8px radius to outline interactive elements with a 4px radius.
Full (128px)
The second most used radius is round, with the Switch and Swatch components using full rounded corners.