API reference
dash_emoji_mart
DashEmojiMart
DashEmojiMart wraps the emoji-mart picker (https://github.com/missive/emoji-mart) as a Dash component.
Selection is reported through two props, and callbacks may use either:
value— a plain string.emoji.nativefor a standard emoji ("😀"), or
emoji.src for a custom one (the image URL). This is the 0.0.x contract and is unchanged.
selectedEmoji— the full emoji-mart object (id, name, native, unified,
shortcodes, keywords, skin, src, ...), for callbacks that need more than the glyph. Added in 0.2.0.
Both are written in a single setProps call, so a callback with both as Inputs fires once per pick rather than twice.
| prop | type | default | description | ||
|---|---|---|---|---|---|
id | string | object | The ID used to identify this component in Dash callbacks. | ||
autoFocus | bool | false | Focus the search input when the picker mounts. | ||
categories | array | [] | Which categories to show, in order. Empty (the default) shows all of them. e.g. ["frequent", "people", "nature"]. | ||
categoryIcons | object | {} | Icons for custom categories, keyed by category id. The value is inlined onto the matching entry in custom — typically an inline SVG string. | ||
className | string | CSS class applied to the wrapper element around the picker. | |||
clickedOutside | number | 0 | Incremented once each time the user clicks outside the picker. Use it the way you would use n_clicks — for example to close a popover. "Outside" means outside the component's wrapper element, so clicking an emoji, the search box or a category tab does NOT increment it. The click that opens the picker does not increment it either. Added in 0.2.0. | ||
custom | array | [] | Custom emoji categories. Each entry is {id, name, emojis: [{id, name, keywords, skins: [{src}]}]}. | ||
dynamicWidth | bool | false | Let the picker's width follow its container instead of perLine. | ||
emojiButtonColors | array | [] | Background colours cycled through on emoji hover/focus. | ||
emojiButtonRadius | string | '100%' | Border radius of each emoji button. Default "100%". | ||
emojiButtonSize | number | 36 | Size in px of each emoji button. Default 36. | ||
emojiSize | number | 24 | Size in px of the emoji inside its button. Default 24. | ||
emojiVersion | number | 14 | Maximum Emoji version to show. Default 14. | ||
exceptEmojis | array | [] | Emoji ids to hide from the grid, e.g. ["rage", "cry"]. GRID ONLY — searching still finds them, for the same reason as noCountryFlags: both filters remove the emoji from its category while SearchIndex.search reads the unfiltered emoji map. Do not rely on this to keep a specific emoji away from a user. | ||
icons | string | 'auto' | Category/search icon style: "auto", "outline" or "solid". | ||
locale | string | 'en' | UI locale, e.g. "en", "fr", "de", "ja". | ||
maxFrequentRows | number | 4 | Rows reserved for frequently used emojis. Default 4. | ||
navPosition | string | 'top' | Category nav position: "top", "bottom" or "none". | ||
noCountryFlags | bool | false | Hide country flags from the grid. Default False. GRID ONLY — searching still finds them. This is an emoji-mart limitation, measured against 5.6.0: the filter runs while building each category and removes the emoji from category.emojis, but SearchIndex.search matches over Object.values(Data.emojis), the unfiltered map, and applies no category filter of its own. So with this on, the flags category shrinks to a small safe list while typing "united" still returns the flags of the UK, US, UAE and the UN. Not worked around here on purpose. emoji-mart loads its data into a module-global exactly once per page, so pre-filtering the data for one picker would silently change every other picker on the page and every page after it in a Dash SPA. A visible search result is better than an invisible, mount-order-dependent one. | ||
noResultsEmoji | string | 'cry' | Emoji id shown when a search returns nothing. Default "cry". | ||
perLine | number | 9 | Emojis per row. Default 9. | ||
persisted_props | list of one of 'value', 'selectedEmoji' | ['value'] | Properties whose value is persisted. Defaults to ["value"]. | ||
persistence | bool | string | number | Whether the picker's selection is persisted across browser sessions. | |
persistence_type | one of 'local', 'session', 'memory' | 'local' | Where persisted selections are stored: "local", "session" or "memory". | ||
previewEmoji | string | 'point_up' | Emoji id shown in the idle preview. Default "point_up". | ||
previewPosition | string | 'bottom' | Preview position: "top", "bottom" or "none". | ||
searchPosition | string | 'sticky' | Search bar position: "sticky", "static" or "none". | ||
selectedEmoji | object | The full emoji-mart object for the current selection — id, name, native, unified, shortcodes, keywords, skin and (for custom emojis) src. Set alongside value on every pick. Read-only. Added in 0.2.0. | |||
set | string | 'native' | Emoji set: "native", "apple", "facebook", "google" or "twitter". Default "native". | ||
skin | number | 1 | Default skin tone, 1 (lightest) to 6 (darkest). Default 1. | ||
skinTonePosition | string | 'preview' | Skin-tone selector position: "preview", "search" or "none". | ||
style | object | Inline styles applied to the wrapper element around the picker. | |||
theme | string | 'auto' | Colour scheme: "auto", "light" or "dark". | ||
value | string | The selected emoji as a string: the native glyph for a standard emoji ("😀"), or the image URL for a custom one. Read this in callbacks. |
Note for AI agents: This is the static, prerendered view of an interactive Dash application served because we detected a non-JS user agent. Full prose docs:
- /api/llms.txt — LLM-friendly documentation
- /sitemap.xml
- /robots.txt