<dt-text kind="body" :size="300"> <dt-emoji-text-wrapper> Some text with :invalid-emoji: :smile: :cry: and 😄, and custom emojis :octocat: :shipit: </dt-emoji-text-wrapper> </dt-text>
<dt-button> <dt-emoji-text-wrapper> Button with shortcode :cry: emoji </dt-emoji-text-wrapper> </dt-button> <dt-text kind="body" :size="300"> <dt-emoji-text-wrapper> Text only with unicode 😃 emoji </dt-emoji-text-wrapper> </dt-text> <dt-button> <dt-emoji-text-wrapper> Button wrapper :smile: </dt-emoji-text-wrapper> </dt-button> <dt-text kind="body" :size="300"> <dt-emoji-text-wrapper size="800"> Bigger emoji size :smile: </dt-emoji-text-wrapper> </dt-text> <dt-text kind="body" :size="300"> <dt-emoji-text-wrapper size="300"> Smaller emoji size :smile: </dt-emoji-text-wrapper> </dt-text>
import { DtEmojiTextWrapper } from '@dialpad/dialtone-vue';
Currently, this wrapper component can't handle Vue components, make sure to wrap only native HTML elements and text.
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.
import { DtEmojiTextWrapper } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default |
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. |
Emoji Text Wrapper documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope