Mask

View source on GitHub

; Opens a new tab

Mask is used to display content in a specific shape.

Figma:

Web:

iOS:

Android:

A11y:

Props

Component props
Name	Type	Default
`children`	`React.Node`	-
	The content to be masked.
`height`	`number \| string`	-
	Use numbers for pixels: height={100} and strings for percentages: height="100%".
`rounding`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| "circle"`	-
	Specifies the corner radius to apply. See the Rounding example for more details.
`wash`	`boolean`	-
	Applies a wash to provide contrast when the masked content is nearly white. See the Wash example for more details.
`width`	`number \| string`	-
	Use numbers for pixels: width={100} and strings for percentages: width="100%".
`willChangeTransform`	`boolean`	-
	Mask applies the style `will-change: transform` by default as a performance optimization. In certain specific scenarios, this can be problematic. This prop can be used to turn off that optimization. See the willChangeTransform example for more details.

Accessibility

Accessibility not available

Variants

Example

<Mask height={70} rounding="circle" width={70}>
  <div style={{ backgroundColor: '#0fa573', width: 70, height: 70 }} />
</Mask>

<Mask height={70} rounding="circle" width={70}>
  <div style={{ backgroundColor: '#0fa573', width: 70, height: 70 }} />
</Mask>

Example: Masking other content

You can compose images with other content (like images or videos) to produce different shapes like rounded rectangles or circles.

<Box maxWidth={300}>
  <Mask rounding="circle">
    <img
      alt="weakendclub.com"
      src="https://i.ibb.co/121JJzC/stock7.jpg"
      style={{ maxWidth: '100%', display: 'block' }}
    />
  </Mask>
</Box>

<Box maxWidth={300}>
  <Mask rounding="circle">
    <img
      alt="weakendclub.com"
      src="https://i.ibb.co/121JJzC/stock7.jpg"
      style={{ maxWidth: '100%', display: 'block' }}
    />
  </Mask>
</Box>

Example: Adding a wash

If you expect the masked content to be nearly white, you can apply a wash to emphasize the edge of the mask.

<Box maxWidth={300}>
  <Mask rounding={2} wash>
    <img
      alt="subliming.tumblr.com"
      src="https://i.ibb.co/8BSrgzX/stock8.jpg"
      style={{ maxWidth: '100%', display: 'block' }}
    />
  </Mask>
</Box>

<Box maxWidth={300}>
  <Mask rounding={2} wash>
    <img
      alt="subliming.tumblr.com"
      src="https://i.ibb.co/8BSrgzX/stock8.jpg"
      style={{ maxWidth: '100%', display: 'block' }}
    />
  </Mask>
</Box>

Rounding Combinations

rounding="circle"

rounding={0}

rounding={1}

rounding={2}

rounding={3}

rounding={4}

rounding={5}

rounding={6}

rounding={7}

rounding={8}

Example: willChangeTransform

If you want to turn off the willChange:transform property for rendering reasons, you can set this to false. See MDN for more details.

<Box maxWidth={300}>
  <Mask rounding={2} willChangeTransform={false}>
    <img
      alt="subliming.tumblr.com"
      src="https://i.ibb.co/8BSrgzX/stock8.jpg"
      style={{ maxWidth: '100%', display: 'block' }}
    />
  </Mask>
</Box>

<Box maxWidth={300}>
  <Mask rounding={2} willChangeTransform={false}>
    <img
      alt="subliming.tumblr.com"
      src="https://i.ibb.co/8BSrgzX/stock8.jpg"
      style={{ maxWidth: '100%', display: 'block' }}
    />
  </Mask>
</Box>

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub

; Opens a new tab