Emoji Dialog

Welcome Dialog

A welcoming onboarding dialog with a friendly memoji and tour prompt.

<EmojiDialog.Root>
  <EmojiDialog.Trigger asChild>
    <Button.Root>Open Welcome Dialog</Button.Root>
  </EmojiDialog.Trigger>
  <EmojiDialog.Content>
    <EmojiDialog.EmojiArea memoji={{ gender: 'female', person: 'angela', skinTone: 'black', posture: 'happy-1' }}>
      <EmojiDialog.Bubble icon={<RiSparklingLine />}>Welcome aboard!</EmojiDialog.Bubble>
    </EmojiDialog.EmojiArea>
    <EmojiDialog.Header>
      <EmojiDialog.Title>Welcome to Happly!</EmojiDialog.Title>
      <EmojiDialog.Description>Your workspace is ready.</EmojiDialog.Description>
    </EmojiDialog.Header>
    <EmojiDialog.Footer>
      <EmojiDialog.Close asChild><Button.Root variant='neutral' mode='stroke'>Skip Tour</Button.Root></EmojiDialog.Close>
      <Button.Root>Start Tour</Button.Root>
    </EmojiDialog.Footer>
  </EmojiDialog.Content>
</EmojiDialog.Root>

Delete Confirmation

Danger-variant bubble for irreversible destructive actions with multi-line description.

<EmojiDialog.Content>
  <EmojiDialog.EmojiArea memoji={{ ... posture: 'sad-3' }}>
    <EmojiDialog.Bubble variant='danger' icon={<RiDeleteBinLine />}>This can't be undone</EmojiDialog.Bubble>
  </EmojiDialog.EmojiArea>
  <EmojiDialog.Header>
    <EmojiDialog.Title>Delete Your Account?</EmojiDialog.Title>
    <EmojiDialog.Description lines={['All data will be removed.', 'This cannot be reversed.']} />
  </EmojiDialog.Header>
  ...
</EmojiDialog.Content>

Unsaved Changes

Warning-variant bubble prompting users to save before navigating away.

<EmojiDialog.EmojiArea memoji={{ ... posture: 'thinking-28' }}>
  <EmojiDialog.Bubble variant='warning' icon={<RiAlertLine />}>Wait a moment!</EmojiDialog.Bubble>
</EmojiDialog.EmojiArea>

Success Confirmation

A clean success dialog without background grid, ideal for payment or completion flows.

<EmojiDialog.Content showBackground={false}>
  <EmojiDialog.EmojiArea memoji={{ ... posture: 'party-11' }}>
    <EmojiDialog.Bubble icon={<RiCheckLine />}>All done!</EmojiDialog.Bubble>
  </EmojiDialog.EmojiArea>
  ...
</EmojiDialog.Content>

With Form Content

Demonstrates custom form fields between header and footer for data collection dialogs.

<EmojiDialog.Content>
  <EmojiDialog.EmojiArea memoji={{ ... }} />
  <EmojiDialog.Header>
    <EmojiDialog.Title>Invite a Teammate</EmojiDialog.Title>
    <EmojiDialog.Description>Send an invite.</EmojiDialog.Description>
  </EmojiDialog.Header>
  <div className='relative z-10 flex flex-col gap-4'>
    <Label.Root>Email</Label.Root>
    <Input.Root>...</Input.Root>
  </div>
  <EmojiDialog.Footer>...</EmojiDialog.Footer>
</EmojiDialog.Content>

Floating Memojis

Satellite memoji avatars floating around the main avatar, great for team or community dialogs.

<EmojiDialog.EmojiArea floatingMemojis memoji={{ ... posture: 'party-11' }}>
  <EmojiDialog.Bubble>We're glad you're here!</EmojiDialog.Bubble>
</EmojiDialog.EmojiArea>

Static (No Animations)

All entry and floating animations disabled for reduced-motion or static contexts.

<EmojiDialog.Content disableAnimations>...</EmojiDialog.Content>

Custom Emoji Area

Fully custom emoji area content using native emoji instead of memoji avatars.

<EmojiDialog.EmojiArea customContent>
  <div className='flex items-end justify-center gap-2 text-[64px]'>🎊🎉🎊</div>
</EmojiDialog.EmojiArea>

EmojiDialog.Root

Wraps the trigger and content. Passes through Radix Dialog.Root props.

EmojiDialog.Content

The modal popup with overlay, close button, and optional decorative background.

EmojiDialog.EmojiArea

Container for the avatar with glassmorphism circle. Supports built-in memoji or custom content.

EmojiDialog.Bubble

Speech bubble positioned above the avatar in the emoji area.

EmojiDialog.Header

Centered container for title and description.

EmojiDialog.Title

The dialog title.

EmojiDialog.Description

The dialog description. Supports multi-line via lines prop.

EmojiDialog.Footer

Container for action buttons. Row on desktop, stacked on mobile.

EmojiDialog.Close

Closes the dialog when clicked.

EmojiDialog.Background

Decorative grid pattern. Included automatically via showBackground prop.