<View direction="row" align="center" justify="center" gap={6}> <div style={{ background: "var(--rs-color-background-neutral)", borderRadius: "var(--rs-radius-small)", width: 60, height: 60, }} /> <div style={{ background: "var(--rs-color-background-neutral)", borderRadius: "var(--rs-radius-medium)", width: 80, height: 80, }} /> <div style={{ background: "var(--rs-color-background-neutral)", borderRadius: "var(--rs-radius-large)", width: 120, height: 120, }} /> </View>
Reshaped supports three radius tokens based on the size of the components they are applied to.
--rs-radius-small --rs-radius-medium --rs-radius-large /* Usage */ .element { border-radius: var(--rs-radius-medium); }