Skip to content

← All components

Brand and content

InlineEmoji

Semantically labelled inline emoji image aligned with text.

Live example

Semantic inline image Blue landscape stays aligned with text.

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

/**
 * Complete InlineEmoji parameter reference.
 * @param image
 *   type: ResponsiveImageModel
 *   required
 *   example: {emoji}
 * @param alt
 *   type: string
 *   default: —
 *   example: "Ada Lovelace"
 * @param referrerPolicy/referrerpolicy
 *   type: HTML referrer policy
 *   default: "no-referrer"
 *   example: "no-referrer"
 * @param image attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function InlineEmojiExample() {
  return (
    <InlineEmoji image={emoji} alt="Sparkles" />
  );
}

Svelte

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

  // Complete InlineEmoji parameter reference.
  // image
  //   type: ResponsiveImageModel
  //   required
  //   example: {emoji}
  // alt
  //   type: string
  //   default: —
  //   example: "Ada Lovelace"
  // referrerPolicy/referrerpolicy
  //   type: HTML referrer policy
  //   default: "no-referrer"
  //   example: "no-referrer"
  // image attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<InlineEmoji image={emoji} alt="Sparkles" />

HTML

html
<!--
  Complete InlineEmoji parameter reference.
  image
    type: ResponsiveImageModel
    required
    example: {emoji}
  alt
    type: string
    default: —
    example: "Ada Lovelace"
  referrerPolicy/referrerpolicy
    type: HTML referrer policy
    default: "no-referrer"
    example: "no-referrer"
  image attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<img class="cf-inline-emoji" src="sparkles.webp" alt="Sparkles" width="24" height="24" />

Parameters

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

ParameterTypeDefaultAdaptersExampleDescription
imagerequiredResponsiveImageModelrequiredReact · Svelte · HTML{emoji}Light-theme responsive source, alternative text, dimensions, and srcset data.
altstring—React · Svelte · HTML"Ada Lovelace"Alternative text; use an empty string when the image is decorative.
referrerPolicy/referrerpolicyHTML referrer policy"no-referrer"React · Svelte · HTML"no-referrer"Controls referrer data sent while loading a remote avatar.
image attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.