Skip to content

⌨️  Keyboard text

Submitted by Arnaud Miribel

Summary

Create a keyboard styled text

Functions

key

Applies a custom CSS to input text which makes it look like a keyboard key.

To be used after running load_key_css() at least once in the app!

Parameters:

Name Type Description Default
text str

Text that will be styled as a key

 required
write bool

If True, this will st.write() the key

 True

Returns:

Name Type Description
str str

HTML of the text, styled as a key
Source code in src/streamlit_extras/keyboard_text/__init__.py 
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@extra
def key(text: str, write: bool = True) -> str:
    """Applies a custom CSS to input text which makes it look like a keyboard key.

    To be used after running load_key_css() at least once in the app!

    Args:
        text (str): Text that will be styled as a key
        write (bool): If True, this will st.write() the key

    Returns:
        str: HTML of the text, styled as a key
    """

    key_html = f'<span class="keyx">{text}</span>'

    if write:
        st.html(key_html)

    return key_html

Import:

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

Examples

example_default

def example_default() -> None:
    load_key_css()
    key("⌘+K")
Output (beta)

example_inline

def example_inline() -> None:
    load_key_css()
    st.write(
        f"Also works inline! Example: {key('⌘+K', write=False)}",
        unsafe_allow_html=True,
    )
Output (beta)