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
property.
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 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 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
class should be applied
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