Skip to content

🫵  Mentions

Submitted by Arnaud Miribel

Summary

Create nice links with icons, like Notion mentions!

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
Source code in src/streamlit_extras/mention/__init__.py 
21
22
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
62
63
64
65
66
67
68
69
70
71
72
@extra
def mention(label: str, url: str, icon: str = "🔗", write: bool = True):
    """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.
    """

    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 validate_url(icon):
        icon_html = img(
            src=icon,
            style="width:1em;height:1em;vertical-align:-0.15em;border-radius:3px;margin-right:0.3em",
        )
    else:
        icon_html = icon + "  "

    mention_html = a(
        contenteditable=False,
        href=url,
        rel="noopener noreferrer",
        style="color:inherit;text-decoration:inherit; height:auto!important",
        target="_blank",
    )(
        span(),
        icon_html,
        span(
            style=(
                "border-bottom:0.05em solid"
                " rgba(55,53,47,0.25);font-weight:500;flex-shrink:0"
            )
        )(label),
        span(),
    )

    html = STYLE_HTML + str(mention_html)
    if write:
        st.write(html, unsafe_allow_html=True)
    else:
        return html

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():
    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():
    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():
    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():
    mention(
        label="That page somewhere in Notion",
        icon="notion",  # Notion is also featured!
        url="https://notion.so",
    )
Output (beta)

example_5

def example_5():
    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)