Shapes direct attention, identify components, communicate state, and express brand.
Currently shape system for web only supports rounded corners.
Design & API Documentation
npm install @limetech/mdc-shape
Components are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding
$mdc-shape-medium-radius variable would apply shape to all components that belong to medium category.
||Rounded shape radius size for small components. Default value
||Rounded shape radius size for medium components. Default value
||Rounded shape radius size for large components. Default value
Please refer Material Design guidelines: Shape to learn about how components are categorized.
||Shape API used by all other components to apply radius to appropriate corners.
mdc-shape-resolve-percentage-radiussass function to resolve percentage unit value to absolute radius value.
||Flips the radius values in RTL context.
||Calculates the absolute radius value based on its component height. Use this for fixed height components only.|
||Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in
Shapes for fixed height components
Styles for applying shape to a fixed height component such as button looks like this:
$mdc-button-height is the height of standard button and
$radius is the size of shape.
mdc-shape-resolve-percentage-radius function is used to resolve percentage unit value to absolute
$radius value based on component height.
Shapes for dynamic height components
Styles for applying shapes to dynamic height component such as card looks like this:
$radius is absolute value only.
Shapes for components on specific corners
Styles for applying shapes for specific corners such as drawer looks like this:
Where, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when
$rtl-reflexive is set to true.
The styles for applying custom shape to button component instance looks like this:
In this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g.,
You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.