# Emoji (/components/typography/emoji)



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

apps/docs/src/examples/emoji/basic.tsx

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

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

Wrap `Emoji` in [Text](/components/typography/text) when it needs a specific typography treatment.

## Accessibility [#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.

## Related components [#related-components]

Use [Text](/components/typography/text) for text and [Icon](/components/visuals/icon) for interface
symbols from Luke UI's icon set.

## API [#api]

<ComponentPropsTable
  id="type-table-emoji.tsx-EmojiProps"
  type="{
  &#x22;id&#x22;: &#x22;emoji.tsx-EmojiProps&#x22;,
  &#x22;name&#x22;: &#x22;EmojiProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for `Emoji`.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;name&#x22;: &#x22;emoji&#x22;,
      &#x22;description&#x22;: &#x22;Emoji character to render.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: true,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;label&#x22;,
      &#x22;description&#x22;: &#x22;Accessible label announced by screen readers.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: true,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`EmojiProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>