Typography

Emoji

Emoji rendering with a reliable screen reader label.

Emoji renders an emoji with a reliable accessible name. It inherits its size from the surrounding text.

Emoji: Basic

Status: ✅

import { Emoji } from '@luke-ui/react/emoji';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Text>
			Status: <Emoji emoji="✅" label="Complete" />
		</Text>
	);
};

Emoji: Basic

Loading Emoji: Basic example

Wrap Emoji in Text when it needs a specific typography treatment.

Accessibility

Emoji requires both emoji and label. Screen readers announce the label instead of the raw emoji, because they do not announce it consistently across platforms.

Write a label that describes the emoji's meaning in context, such as "Celebration". Do not repeat text that is already in the surrounding sentence, because that creates duplicate screen reader output.

API

EmojiProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type
emoji	string
Emoji character to render.
label	string
Accessible label announced by screen readers.