Sticker
View in LexiconStickers 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'; |
Table of Contents
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'; import '@clayui/css/lib/css/atlas.css'; export default function App() { return ( <Provider spritemap="/public/icons.svg"> <div className="bg-light p-4"> <> <Sticker className="mr-1" displayType="danger" size="sm"> <Icon symbol="user" /> </Sticker> <Sticker className="mr-1" displayType="dark" size="md"> <Icon symbol="user" /> </Sticker> <Sticker className="mr-1" displayType="info" size="lg"> <Icon symbol="user" /> </Sticker> <Sticker className="mr-1" displayType="light" size="xl"> <Icon symbol="user" /> </Sticker> <Sticker className="mr-1" displayType="secondary" size="xl"> <Icon symbol="user" /> </Sticker> <Sticker className="mr-1" displayType="success" size="lg"> <Icon symbol="user" /> </Sticker> <Sticker className="mr-1" displayType="unstyled" size="md"> <Icon symbol="user" /> </Sticker> <Sticker displayType="warning" size="sm"> <Icon symbol="user" /> </Sticker> <div className="mt-3"> <Sticker className="mr-1" displayType="outline-0" size="xs" > S </Sticker> <Sticker className="mr-1" displayType="outline-1" size="sm" > M </Sticker> <Sticker className="mr-1" displayType="outline-2"> C </Sticker> <Sticker className="mr-1" displayType="outline-3" size="lg" > M </Sticker> <Sticker className="mr-1" displayType="outline-4" size="xl" > S </Sticker> <Sticker className="mr-1" displayType="outline-5"> S </Sticker> <Sticker className="mr-1" displayType="outline-6"> E </Sticker> <Sticker className="mr-1" displayType="outline-7"> Q </Sticker> <Sticker className="mr-1" displayType="outline-8"> D </Sticker> <Sticker displayType="outline-9">P</Sticker> </div> </> </div> </Provider> ); }
User Icon
A specific type of Sticker used to display user icons. Use the attribute shape="user-icon"
just like in the example below:
import {Provider} from '@clayui/core'; import Sticker from '@clayui/sticker'; import React from 'react'; import '@clayui/css/lib/css/atlas.css'; export default function App() { return ( <Provider spritemap="/public/icons.svg"> <div className="bg-light p-4"> <> <Sticker className="mr-1" shape="user-icon" size="xl"> <Sticker.Image alt="placeholder" src="https://clayui.com/images/long_user_image.png" /> </Sticker> <Sticker shape="user-icon" size="xl"> BS </Sticker> </> </div> </Provider> ); }
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
Table of Contents