Skip to content

🫵  Mentions

Submitted by Arnaud Miribel

Summary

Create nice links with icons, like Notion mentions! **Note: There's also a great st.link_button in the native Streamlit commands offering! Have a look at it!

Functions

mention

Mention a link with a label and icon.

Parameters:

Name Type Description Default
label str

Label to use in the mention

 required
icon str

Icon to use. Can be an emoji or a URL. Default '🔗'

 '🔗'
url str

Target URL of the mention

 required
write bool

Writes the mention directly. If False, returns the raw HTML. Useful if mention is used inline.

 True

Returns:

Type Description
str | None

str | None: The HTML string if write is False, otherwise None.
Source code in src/streamlit_extras/mention/__init__.py 
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
@extra
def mention(label: str, url: str, icon: str = "🔗", write: bool = True) -> str | None:
    """Mention a link with a label and icon.

    Args:
        label (str): Label to use in the mention
        icon (str): Icon to use. Can be an emoji or a URL. Default '🔗'
        url (str): Target URL of the mention
        write (bool): Writes the mention directly. If False, returns the raw HTML.
            Useful if mention is used inline.

    Returns:
        str | None: The HTML string if write is False, otherwise None.
    """

    if icon.lower() == "github":
        icon = GITHUB_ICON
    elif icon.lower() == "notion":
        icon = NOTION_ICON
    elif icon.lower() == "twitter":
        icon = TWITTER_ICON
    elif icon.lower() == "streamlit":
        icon = STREAMLIT_ICON

    if is_url(icon):
        icon_escaped = html.escape(icon, quote=True)
        icon_html = f'<img src="{icon_escaped}" style="width:1em;height:1em;vertical-align:-0.15em;border-radius:3px;margin-right:0.3em">'
    else:
        icon_html = html.escape(icon) + "  "

    url_escaped = html.escape(url, quote=True)
    label_escaped = html.escape(label)
    mention_html = f'<a contenteditable="false" href="{url_escaped}" rel="noopener noreferrer" style="color:inherit;text-decoration:inherit;height:auto!important" target="_blank"><span></span>{icon_html}<span style="border-bottom:0.05em solid rgba(55,53,47,0.25);font-weight:500;flex-shrink:0">{label_escaped}</span><span></span></a>'

    html_output = STYLE_HTML + mention_html
    if write:
        st.html(html_output)
        return None
    return html_output

Import:

from streamlit_extras.mention import mention # (1)!
  1. You should add this to the top of your .py file 🛠

Examples

example_1

def example_1() -> None:
    mention(
        label="An awesome Streamlit App",
        icon="streamlit",  # Some icons are available... like Streamlit!
        url="https://extras.streamlitapp.com",
    )
Output (beta)

example_2

def example_2() -> None:
    mention(
        label="streamlit-extras",
        icon="🪢",  # You can also just use an emoji
        url="https://github.com/arnaudmiribel/streamlit-extras",
    )
Output (beta)

example_3

def example_3() -> None:
    mention(
        label="example-app-cv-model",
        icon="github",  # GitHub is also featured!
        url="https://github.com/streamlit/example-app-cv-model",
    )
Output (beta)

example_4

def example_4() -> None:
    mention(
        label="That page somewhere in Notion",
        icon="notion",  # Notion is also featured!
        url="https://notion.so",
    )
Output (beta)

example_5

def example_5() -> None:
    inline_mention = mention(
        label="streamlit",
        icon="twitter",  # Twitter is also featured!
        url="https://www.twitter.com/streamlit",
        write=False,
    )

    st.write(
        f"Here's how to use the mention inline:  {inline_mention}. Cool right?",
        unsafe_allow_html=True,
    )
Output (beta)