Skip to main content

Custom Notion Style Links

Example​

Here you can visit: ❤️ Google

Usage​

This is a custom react component. It's purpose is to make linking to internal links look better. To use it, wrap the text in a <nlink></nlink> tag. Then you can add the following parameters:

Parameters​

NameTypeDescription
hrefstringThe link to go to
emojistringThe emoji to use
colorstringThe color of the hyperlink text

Example Code:​

Here you can visit <nlink color="#ff0000" href="https://google.com" emoji="❤️">Google</nlink>
note

To use this component, you must use the mdx file extension. This is because the component is written in react, and react is not supported in markdown files.

Planned Features​

  • Add support for custom icon library.
  • Make hover animation better.
  • Fix slight spacing bug with the underline.