Skip to content

← All components

Brand and content

Sticker

Attributed sticker figure with required alternative text.

Live example

🦊 cofob.dev
A fox looking pleased with itself beneath the Russian caption ‘Как же я хорош’
Source: PhSilver sticker pack

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Sticker } from "@cofob/design-system-react";

/**
 * Complete Sticker parameter reference.
 * @param tone
 *   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
 *   default: "neutral"
 *   example: "success"
 * @param rotation
 *   type: -6 | -3 | 0 | 3 | 6
 *   default: -3
 *   example: -3
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param data-image
 *   type: "true" when the sticker contains an image
 *   default: —
 *   example: data-image="true"
 * @param span attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function StickerExample() {
  return (
    <figure><Sticker data-image="true"><img src="/sticker.webp" alt="A delighted fox" /></Sticker><figcaption>Source: …</figcaption></figure>
  );
}

Svelte

svelte
<script lang="ts">
  import { Sticker } from "@cofob/design-system-svelte";

  // Complete Sticker parameter reference.
  // tone
  //   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
  //   default: "neutral"
  //   example: "success"
  // rotation
  //   type: -6 | -3 | 0 | 3 | 6
  //   default: -3
  //   example: -3
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // data-image
  //   type: "true" when the sticker contains an image
  //   default: —
  //   example: data-image="true"
  // span attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<figure><Sticker data-image="true"><img src="/sticker.webp" alt="A delighted fox" /></Sticker><figcaption>Source: …</figcaption></figure>

HTML

html
<!--
  Complete Sticker parameter reference.
  tone
    type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
    default: "neutral"
    example: "success"
  rotation
    type: -6 | -3 | 0 | 3 | 6
    default: -3
    example: -3
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  data-image
    type: "true" when the sticker contains an image
    default: —
    example: data-image="true"
  span attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<figure><span class="cf-sticker" data-image="true"><img src="/sticker.webp" alt="A delighted fox" /></span><figcaption>Source: …</figcaption></figure>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
tone"neutral" | "accent" | "info" | "success" | "warning" | "danger""neutral"React · Svelte · HTML"success"Applies semantic color intent without hard-coded colors.
rotation-6 | -3 | 0 | 3 | 6-3React · Svelte · HTML-3Small tokenized decorative rotation.
childrenReactNode | Svelte Snippet | child HTML—React · Svelte · HTMLchildren / snippet / child HTMLIdiomatic adapter composition content.
data-image"true" when the sticker contains an image—React · Svelte · HTMLdata-image="true"Removes label-like padding when Sticker wraps an attributed image.
span attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.