Mask applies a shape mask to its content. Use it to create avatars, icons, or any element with a custom geometric shape. Supports a variety of shapes via boolean props or a shape string prop.
Demonstrates all available mask shapes using the Mask component.
Mask is a standalone component.
Applies a geometric mask to its slot content. Set the shape using boolean props or the shape string prop.
| Mask Props | Type | Description |
|---|---|---|
shape | string | Sets the shape of the mask. Equivalent to setting one of the below boolean props. |
| squircle | boolean | set shape to squircle |
| heart | boolean | set shape to heart |
| hexagon | boolean | set shape to hexagon |
| hexagon2 | boolean | set shape to hexagon-2 |
| decagon | boolean | set shape to decagon |
| pentagon | boolean | set shape to pentagon |
| diamond | boolean | set shape to diamond |
| square | boolean | set shape to square |
| circle | boolean | set shape to circle |
| star | boolean | set shape to star |
| star2 | boolean | set shape to star-2 |
| triangle | boolean | set shape to triangle |
| triangle2 | boolean | set shape to triangle-2 |
| triangle3 | boolean | set shape to triangle-3 |
| triangle4 | boolean | set shape to triangle-4 |
| half1 | boolean | set shape to half-1 |
| half2 | boolean | set shape to half-2 |
| Mask Slots | Description |
|---|---|
default | The default slot. Content to be masked by the chosen shape. |