Stickers are a visual way to quickly identify content in a different way than badges and labels.

installyarn add @clayui/sticker
versionNPM Version
useimport Sticker from '@clayui/sticker';

Colors

Lexicon adopts in its design system the following colors below:

133133133133133133

Snippet

Sticker Variant Sass API

The map $sticker-palette allows generating any number of sticker variants. If a key starts with ., #, or % Clay will output it as is, otherwise we will prepend .sticker- to the key (e.g., .sticker-my-primary). It will also generate a Sass placeholder prefixed by %sticker- (e.g., %sticker-my-primary).

Snippet

Outputs:

Snippet

Position

Place them anywhere relative to your container using positional sticker classes sticker-top-left, sticker-bottom-left, sticker-top-right, and sticker-bottom-right.

thumbnailPDF
thumbnailPDF
thumbnailPDF
thumbnailPDF

Snippet

Sizes

Stickers come in 4 sizes sm, default, lg, and xl. Create your own custom size with the sticker-size mixin.

133133133133

Snippet

Sticker Size Sass API

The map $sticker-sizes allows generating any number of sticker size variants. If a key starts with ., #, or % Clay will output it as is, otherwise it will prepend . to the key (e.g., .my-sticker-lg). It will also generate a Sass placeholder prefixed by % (e.g., %my-sticker-lg).

Snippet

Outputs:

Snippet

Variations

Overlay

Overlay content over stickers by nesting sticker-overlay inside sticker.

thumbnailJBthumbnailTTthumbnailSPthumbnailBC

Snippet

Outside

Add class sticker-outside in conjunction with sticker positions to position the sticker on the outside corners.

Snippet

User Icon

thumbnailthumbnailthumbnailthumbnailthumbnailthumbnailJBTTSPBC

Snippet

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM