Corner Radius

Overview
Specs
Guidelines

Compose Design allows allows you to round off the corners of a variety of components, with corner radius metric values ranging from 999, 24, 16, 12, eight, and four for easy reference. The specific radius metric used depends on the size of the component to which it is applied.

Flexibility

To enhance the usability and versatility of corner radius values, we’ve selected a set of standardized values. This minimizes discrepancies between developers and designers, ensuring smoother collaboration and implementation.

Usage

The size of a component determines its radius values, with larger components containing other components being able to have a larger corner radius. Each component in Compose comes preset with the appropriate corner radius. This guide provides an understanding of how radius values are implemented in the Compose library.

In most cases, corner radiuses on rectangle shapes are four pixels by default.

corner_radius_usage — Corner Radius guide

Corner Radius Values

By default, every component is mapped to one of the seven shape styles.
Use these radius tokens to change the corner radius on elements.

Token	Usage	Value
X-Small	Buttons, text fields, checkboxes	4 pixels
Small	Date picker, dropdowns	8 pixels
Medium		12 pixels
Large		16 pixels
X-Large		24 pixels
Rounded	Switch, radio button, avatar	999 pixels

Four Pixels Radius (Default)

The most commonly used number for the corner radius is four pixels. Medium-sized components like buttons, text fields and checkboxes use this value by default.

Rounded

The number we use to achieve full rounded corners is 999px. Small-sized components like switch, radio button, avatar use this value by default.

Symmetry

Components can have either symmetric or asymmetric corner shapes. Symmetric shapes have the same value for all corners, while asymmetric shapes can have corners with different values. Components such as button groups and split buttons are always asymmetric .

Nested Components

For components with a default corner radius of four pixels, their corner radius will remain four pixels when nested inside other components. This choice was made to maintain consistency with the the parent component.

FAQ

Are off-scale corner radius increments allowed?

No, deviating from the spacing scales should be avoided whenever possible.

Não foram encontrados artigos.

Token Mapping

Token	Usage	Value
x-small-radius (default)	Buttons, textfields, checkboxes	4 pixels
small-radius	Datepicker, dropdowns	8 pixels
medium-radius		12 pixels
large-radius		16 pixels
x-large-radius		24 pixels
rounded	Switch, radio button, avatar	999 pixels

Applying radius

For easy identification, token names inherently convey their purpose, aiding in their correct application. The initial segment of a token name indicates the designated radius size for the UI element, such as sx-mall or larger-radius.

border-radius: var(--Border-Radius-x-small-radius);
border-radius: var(--Border-Radius-small-radius);
border-radius: var(--Border-Radius-medium-radius);
border-radius: var(--Border-Radius-large-radius);
border-radius: var(--Border-Radius-x-large-radius);
border-radius: var(--Border-Radius-rounded);