@material/shape
Advanced tools
Shapes direct attention, identify components, communicate state, and express brand.
Currently shape system for web only supports rounded corners.
npm install @material/shape
@use "@material/shape";
Components are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.
| Variable | Description |
|---|---|
$small-component-radius | Rounded shape radius size for small components. Default value 4px. |
$medium-component-radius | Rounded shape radius size for medium components. Default value 4px. |
$large-component-radius | Rounded shape radius size for large components. Default value 0. |
Please refer Material Design guidelines: Shape to learn about how components are categorized.
Note: Only rounded shape designs are currently supported.
| CSS Custom Property | Description |
|---|---|
--mdc-shape-small | Rounded shape radius size for small components. Default value 4px. |
--mdc-shape-medium | Rounded shape radius size for small components. Default value 4px. |
--mdc-shape-large | Rounded shape radius size for small components. Default value 0. |
Note: Do not use percentage values with custom properties, since they cannot be resolved by shape.radius() at runtime.
| Mixin | Description |
|---|---|
radius($radius, $rtl-reflexive) | Shape API used by all other components to apply radius to appropriate corners. $radius can be single value or list of up to 4 radius corner values. Set $rtl-reflexive to true to flip the radius in RTL case, false by default. |
| Function | Description |
|---|---|
resolve-radius($radius, $component-height) | Returns the resolved radius value of a shape category - large, medium, or small. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. $component-height should be provided if $radius may be a percentage. |
flip-radius($radius) | Flips the radius values in RTL context. $radius is list of 2-4 corner values. |
mask-radius($radius, $masked-corners) | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in $masked-corners. |
unpack-radius($radius) | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is. |
Styles for applying shape to a fixed height component such as button looks like this:
@use "@material/button";
@include shape.radius($radius, $component-height: button.$height);
Where button.$height is the height of standard button and $radius is the size of the shape. shape.radius() will resolve any percentage unit value to an absolute radius value based on the component's height.
Styles for applying shapes to dynamic height component such as card looks like this:
@include shape.radius($radius);
Where $radius is an absolute value only.
Styles for applying shapes for specific corners such as drawer looks like this:
@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);
Where only top-right & bottom-right corners are customizable. shape.radius() will automatically flip radius values based on RTL context if $rtl-reflexive is set to true.
The styles for applying custom shape to a button component looks like this:
@use "@material/button";
.my-custom-button {
@include button.shape-radius(50%);
}
In this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., 8px);
The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.
12.0.0 (2021-07-27)
return statement into MDCTooltipComponent#isShown method. (4d95812)mdc-card__ripple element rather than the mdc-card__primary-action. (8ace3b8)#close within #destroy. (5631828)forceUpdate option to #setSelectedIndex that forces a UI update of the selected item. (5d06051)transform-origin for tooltips with caret so that the entrance animation originates from the caret. (1a8d064)tranform-origin. (25751d2)data-hide-tooltip-from-screenreader="true" (in addition to using data-tooltip-id rather than aria-describedby.PiperOrigin-RevId: 386490861
window.mdc.circularProgress to window.mdc['circular-progress].PiperOrigin-RevId: 384568221
mdc-icon-button__ripple. See README for details.PiperOrigin-RevId: 372153409
FAQs
Shape utilities for Material Components for the web
The npm package @material/shape receives a total of 646,858 weekly downloads. As such, @material/shape popularity was classified as popular.
We found that @material/shape demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.