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: 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
@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 = str(span(_class="keyx")(text))

    if write:
        st.write(key_html, unsafe_allow_html=True)

    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():
    load_key_css()
    key("⌘+K")
Output (beta)

example_inline

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