How can I add a button next to "Deploy" button?

Using Streamlit
1

Hi experts,

I am currently working on a project that requires a user login and a logout button. The optimal location for the button would be next to the “Deploy” button. I have attempted various solutions found online and have utilized the streamlit-javascript library. However, many of the solutions require the addition of an iframe and the creation of a button within it. Although I have successfully implemented the code in my browser, I am struggling to integrate it into my streamlit app.

// Create a new button element for "Logout"
        var logoutButton = document.createElement('button');
        logoutButton.className = 'st-emotion-cache-6bnv3b ef3psqc4';
        logoutButton.innerHTML = '<div class="st-emotion-cache-1wbqy5l e17vllj40"><span>Logout</span></div>';
        
        // Find the container where you want to add the "Logout" button
        var deployButtonContainer = document.querySelector('.stDeployButton');
        
        // Append the "Logout" button next to the "Deploy" button
        deployButtonContainer.parentNode.insertBefore(logoutButton, 
    deployButtonContainer.nextSibling);

Expected Behaviour

Screenshot 2023-10-03 at 3.13.11 PM
Screenshot 2023-10-03 at 3.13.11 PM1930×428 25.6 KB

My Setup

  • Streamlit version: 1.27.0
  • Python version: 3.10.5
  • pip
  • OS version: MacOs
  • Browser version: Chrome latest
1 Like
2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.