Sticker

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';

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:

Open on CodeSandboxOpen Sandbox
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="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>
	);
}

User Icon

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

Open on CodeSandboxOpen Sandbox
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="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>
	);
}

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
Returns
Element

Sticker

typeof Sticker
Parameters
Properties

displayType

"danger" | "dark" | "info" | "light" | "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
Element
Edit this page on GitHub

Contributors

Table of Contents