Skip to content

← All components

Brand and content

AnimatedStickerToggle

Persisted global switch between animated WebM stickers and static SVG/WebP first frames.

Live example

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 { AnimatedStickerToggle } from "@cofob/design-system-react";

/**
 * Complete AnimatedStickerToggle parameter reference.
 * @param enabled/defaultEnabled
 *   type: boolean; controlled or initial global state
 *   default: true
 *   example: {enabledOrdefaultEnabled}
 * @param label
 *   type: string | renderable content
 *   default: "Animated stickers"
 *   example: "Accessible label"
 * @param description
 *   type: string | renderable content
 *   default: —
 *   example: "Supporting context for this control."
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param onEnabledChange
 *   type: (enabled: boolean) => void
 *   default: —
 *   example: {handleEnabledChange}
 * @param input attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function AnimatedStickerToggleExample() {
  return (
    <AnimatedStickerToggle defaultEnabled label="Animated stickers" onEnabledChange={setEnabled} />
  );
}

Svelte

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

  // Complete AnimatedStickerToggle parameter reference.
  // enabled/defaultEnabled
  //   type: boolean; controlled or initial global state
  //   default: true
  //   example: {enabledOrdefaultEnabled}
  // label
  //   type: string | renderable content
  //   default: "Animated stickers"
  //   example: "Accessible label"
  // description
  //   type: string | renderable content
  //   default: —
  //   example: "Supporting context for this control."
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // onEnabledChange
  //   type: (enabled: boolean) => void
  //   default: —
  //   example: {handleEnabledChange}
  // input attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<AnimatedStickerToggle bind:enabled label="Animated stickers" onEnabledChange={setEnabled} />

HTML

html
<!--
  Complete AnimatedStickerToggle parameter reference.
  enabled/defaultEnabled
    type: boolean; controlled or initial global state
    default: true
    example: {enabledOrdefaultEnabled}
  label
    type: string | renderable content
    default: "Animated stickers"
    example: "Accessible label"
  description
    type: string | renderable content
    default: —
    example: "Supporting context for this control."
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  onEnabledChange
    type: (enabled: boolean) => void
    default: —
    example: {handleEnabledChange}
  input attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<label class="cf-switch cf-animated-sticker-toggle" data-cf-animated-sticker-toggle-root><input class="cf-switch__control" type="checkbox" role="switch" data-cf-animated-sticker-toggle checked><span class="cf-switch__track" aria-hidden="true"><span class="cf-switch__thumb"></span></span><span class="cf-switch__content"><span class="cf-switch__label">Animated stickers</span></span></label>

<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
enabled/defaultEnabledboolean; controlled or initial global statetrueReact · Svelte · HTML{enabledOrdefaultEnabled}Controls the persisted document-wide data-cf-animated-stickers flag. Disabled mode unloads WebM and restores each SVG/WebP first frame; ordinary static stickers are unchanged.
labelstring | renderable content"Animated stickers"React · Svelte · HTML"Accessible label"Visible or accessible name, depending on the component.
descriptionstring | renderable content—React · Svelte · HTML"Supporting context for this control."Supporting explanatory content.
size"sm" | "md" | "lg" (plus heading sizes)"md"React · Svelte · HTML"md"Applies a design-system size token.
onEnabledChange(enabled: boolean) => void—React · Svelte · HTML{handleEnabledChange}Runs after the global animated sticker preference changes through this control.
input attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.