Emoji Text Wrapper

Storybook

Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.

Preview

Variants and Examples

Text Only

Variants

Vue API

Slots

Name
Description
default

Props

Name
Description
Default
elementType

Element type (tag name) to use for the wrapper.

 Type: string
'div'
size

The icon size to render the emojis at: 100 to 800

 Type: string
'500'

Usage

Import 

import { DtEmojiTextWrapper } from '@dialpad/dialtone-vue';

Limitations

Currently, this wrapper component can't handle Vue components, make sure to wrap only native HTML elements and text.

Custom Emojis

It supports custom emojis, you can use the shortcode to display them. For example, :octocat: will render the octocat emoji. To do this, you need to set up custom emojis in your application.

Emoji Text Wrapper documentation last updated Thursday, June 11, 2026