ClaySticker component

Usage no npm install needed!

<script type="module">
  import clayuiSticker from 'https://cdn.skypack.dev/@clayui/sticker';


title: 'Sticker' description: 'Stickers are a visual way to quickly identify content in a different way than badges and labels.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/stickers/' packageNpm: '@clayui/sticker'

import { StickerColorsAndSizes, StickerUserIcon, } from '$packages/clay-sticker/docs/index';

Display Type

Stickers can be any color. Set sticker's color using displayType property.

Also, you can use the following sizes on your Sticker just setting up size:

User Icon

Use a ClaySticker as User Icon just adding sticker-user-icon on className of the ClaySticker component like the example below:


You can set a desired alignment of sticker according to a parent element, just setting up the position property. If you want to set the position of the sticker on the outside corners, use outside property in conjunction with position property.

Overlay content over stickers by nesting sticker-overlay elements as children of ClaySticker. Check our example on Storybook