Stickers are a visual way to quickly identify content in a different way than badges and labels.
install yarn add @clayui/sticker version use import Sticker from '@clayui/sticker' ;
Display Type
Stickers can be any color. Set sticker’s color using displayType
Also, you can use the following sizes on your Sticker just setting up size
import {Provider } from '@clayui/core' ;
import Sticker from '@clayui/sticker' ;
import Icon from '@clayui/icon' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<>
<Sticker displayType = "danger" size = "sm" >
<Icon symbol = "user" />
</Sticker >
<Sticker displayType = "dark" size = "md" >
<Icon symbol = "user" />
</Sticker >
<Sticker displayType = "info" size = "lg" >
<Icon symbol = "user" />
</Sticker >
<Sticker displayType = "light" size = "xl" >
<Icon symbol = "user" />
</Sticker >
<Sticker displayType = "secondary" size = "xl" >
<Icon symbol = "user" />
</Sticker >
<Sticker displayType = "success" size = "lg" >
<Icon symbol = "user" />
</Sticker >
<Sticker displayType = "unstyled" size = "md" >
<Icon symbol = "user" />
</Sticker >
<Sticker displayType = "warning" size = "sm" >
<Icon symbol = "user" />
</Sticker >
<div className = "mt-3" >
<Sticker displayType = "outline-0" >S</Sticker >
<Sticker displayType = "outline-1" >M</Sticker >
<Sticker displayType = "outline-2" >C</Sticker >
<Sticker displayType = "outline-3" >M</Sticker >
<Sticker displayType = "outline-4" >S</Sticker >
<Sticker displayType = "outline-5" >S</Sticker >
<Sticker displayType = "outline-6" >E</Sticker >
<Sticker displayType = "outline-7" >Q</Sticker >
<Sticker displayType = "outline-8" >D</Sticker >
<Sticker displayType = "outline-9" >P</Sticker >
</div >
</>
</div >
</Provider >
);
}Show code User Icon
Use a Sticker as User Icon just adding sticker-user-icon on className of the Sticker component like the example below:
import {Provider } from '@clayui/core' ;
import Sticker from '@clayui/sticker' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<>
<Sticker userIcon size = "xl" >
<Sticker . Image
alt = "placeholder"
src = "https://clayui.com/images/long_user_image.png"
/>
</Sticker >
<Sticker userIcon size = "xl" >
BS
</Sticker >
</>
</div >
</Provider >
);
}Show code Positioning
You can set a desired alignment of sticker according to a parent element, just setting up the positionoutsideposition
Overlay content over stickers by nesting sticker-overlay elements as children of Sticker. Check our example on Storybook
API Reference
Overlay ({ children , className , inline , ... otherProps }: IOverylayProps ) => JSX .Element Parameters Properties inline boolean | undefined
Flag to indicate if inline - item
Returns Element
Image ({ className , ... otherProps }: React .ImgHTMLAttributes <HTMLImageElement >) => JSX .Element Parameters Properties displayType "light" | "danger" | "dark" | "info" | "primary" | "secondary" | "success" | "unstyled" | "warning" | "outline-0" | "outline-1" | "outline-2" | "outline-3" | "outline-4" | "outline-5" | "outline-6" | "outline-7" | "outline-8" | "outline-9" | undefined
Determines the color of the sticker.
inline boolean | undefined
Turns the sticker inline
outside boolean | undefined
Flag to indicate if the sticker should be positioned on the outside
corners when position is defined.
position "bottom-left" | "bottom-right" | "top-left" | "top-right" | undefined
Position of the sticker in relation to the contents.
shape "circle" | "user-icon" | undefined
Shape of the sticker.
size "lg" | "sm" | "xl" | undefined
Sticker size.
Returns ElementEdit this page on GitHub Contributors
Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Krešimir Čoko
Last edited May 9, 2025 at 6:15:38 AM
