Example
👋
Patterns
Semantic
The label provided will be announced by screen readers as part of any surrounding text.
Built with 💖 using KeystarUI.
Decorative
When no label is provided the emoji is treated as a decorative element with no semantic meaning and is hidden from assistive technology.
Ornamental usage
Accessibility
The Emoji component wraps the provided symbol in a span with a role="img" attribute.
If a label is provided, then it is passed as an aria-label to the span.
<Emoji symbol="🚀" label="rocket ship" />// yields<span aria-label="rocket ship" role="img">🚀</span>If not, then aria-hidden is set to true.
<Emoji symbol="🤫" />// yields<span aria-hidden="true" role="img">🤫</span>