Style Customization

Emoji Button uses CSS variables for its styling. You can override any of these variables by including them in the styleProperties option. This option is a set of keys and values mapping CSS variable names to their values.

See CSS Variables for a list of variables that can be overridden.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  styleProperties: {
    '--font': 'Courier New',
    '--category-button-color': 'red'
  }
});