docs/extension-test-page
What's New

Emoji Text Wrapper

Storybook GitHub

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 

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

Slots

Name
Type
default

Props

Name
Default
Type
elementType
'div'
string

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

size
'500'
"100" | "200" | "300" | "400" | "500" | "600" | "700" | "800"

The icon size to render the emojis at.

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 18, 2026