Emoji Appearance Toggle Group

3DFlatModernMonoAnimated

tsx

1
2
3import type { FluentEmojiStyle } from '@zeroxsolutions/fluent-emoji';
import { useState, type ReactNode } from 'react';

View code

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/emoji-appearance-toggle-group.json

Usage#

import {
  EmojiAppearanceToggleGroup,
  EmojiAppearanceToggleGroupItem,
} from '@/components/data-entry/emoji-appearance-toggle-group';

<EmojiAppearanceToggleGroup value={style} onValueChange={setStyle}>
  <EmojiAppearanceToggleGroupItem value="3d">3D</EmojiAppearanceToggleGroupItem>
  <EmojiAppearanceToggleGroupItem value="flat">Flat</EmojiAppearanceToggleGroupItem>
</EmojiAppearanceToggleGroup>

It renders one EmojiAppearanceToggleGroupItem per style the app offers; the preview emoji is the selector, so a style is always chosen. This is an app-level appearance control, not the emoji glyph picker: the style is a global preference the consumer persists and applies app-wide with setFluentEmojiStyle. Use it to choose that style; for picking an emoji glyph, use Emoji Picker.

Composition#

EmojiAppearanceToggleGroup
`-- EmojiAppearanceToggleGroupItem

API reference#

EmojiAppearanceToggleGroup#

Renders shadcn's ToggleGroup and takes every prop it takes except value, defaultValue, onValueChange and multiple, plus:

Binds Base UI's array value to the lone style and ignores a deselect, so a style is always chosen. It defaults variant to outline and aria-label to "Emoji style", keeps the toggle group's default spacing, and wraps its swatches onto further rows when narrower than they are. It sets data-slot="emoji-appearance-toggle-group".

EmojiAppearanceToggleGroupItem#

Renders shadcn's ToggleGroupItem and takes every prop it takes except value, plus:

One swatch: draws the sample emoji, hidden from assistive technology, in value's style (an anim swatch plays its frames) before the consumer's label (children), which names the swatch; the preview is drawn at size-6 (24px), and the mono artwork inverts in the dark theme. It sets data-slot="emoji-appearance-toggle-group-item".