---
tags: [gradio-custom-component, SideBar]
title: gradio_bottombar
short_description: A Bottom bar for Gradio Interface
colorFrom: blue
colorTo: yellow
sdk: gradio
pinned: false
app_file: space.py
---
# `gradio_bottombar`
<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">
A Bottom bar for Gradio Interface
## Installation
```bash
pip install gradio_bottombar
```
## Usage
```python
# demo/app.py
import gradio as gr
import time
from gradio_bottombar import BottomBar
def chat_response(message, history):
history = history or ""
history += f"You: {message}\n"
time.sleep(1) # Simulate thinking
history += f"Bot: Thanks for the message! You said: '{message}'\n"
return history, ""
def update_label(value):
return f"Current temperature is: {value}"
css = """
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
.gradio-container {
border-radius: 15px;
padding: 30px 40px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
margin: 40px 340px;
}
.gradio-container h1 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.fillable {
width: 100% !important;
max-width: unset !important;
}
#examples_container {
margin: auto;
width: 90%;
}
#examples_row {
justify-content: center;
}
#tips_row{
padding-left: 20px;
}
.sidebar {
border-radius: 10px;
padding: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.sidebar .toggle-button {
background: linear-gradient(90deg, #34d399, #10b981) !important;
border: none;
padding: 12px 18px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.toggle-button:hover {
transform: scale(1.05);
}
.bottom-bar {
border-radius: 10px;
padding: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.bottom-bar .toggle-bottom-button {
background: linear-gradient(90deg, #34d399, #10b981) !important;
border: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
}
"""
with gr.Blocks(css=css, theme=gr.themes.Ocean(), title="Full Layout Demo") as demo:
gr.Markdown(
"""
# Full Layout Demo: BottomBar with Sidebars
This demo shows the `BottomBar` with `bring_to_front=True`. Notice how it now renders
**on top of** the sidebars when they overlap.
"""
)
with BottomBar(open=True, height=180, bring_to_front=True):
with gr.Row():
message_box = gr.Textbox(
show_label=False,
placeholder="Type your message here...",
elem_id="message-input",
scale=7
)
send_button = gr.Button("Send", variant="primary", scale=1)
with gr.Row():
gr.Button("Upload File")
gr.Button("Record Audio")
gr.ClearButton([message_box])
with gr.Row(equal_height=True):
with gr.Sidebar(position="left"):
gr.Markdown("### âī¸ Settings")
model_temp = gr.Slider(0, 1, value=0.7, label="Model Temperature")
temp_label = gr.Markdown(update_label(0.7))
gr.CheckboxGroup(
["Enable History", "Use Profanity Filter", "Stream Response"],
label="Chat Options",
value=["Enable History", "Stream Response"]
)
with gr.Column(scale=3):
gr.Markdown("### đ¤ Chat Interface")
chatbot_display = gr.Textbox(
label="Chat History",
lines=25,
interactive=False
)
with gr.Sidebar(position="right"):
gr.Markdown("### âšī¸ Information")
gr.Radio(
["GPT-4", "Claude 3", "Llama 3"],
label="Current Model",
value="Claude 3"
)
gr.Dropdown(
["English", "Spanish", "Portuguese"],
label="Language",
value="Portuguese"
)
send_button.click(
fn=chat_response,
inputs=[message_box, chatbot_display],
outputs=[chatbot_display, message_box]
)
message_box.submit(
fn=chat_response,
inputs=[message_box, chatbot_display],
outputs=[chatbot_display, message_box]
)
model_temp.change(
fn=update_label,
inputs=model_temp,
outputs=temp_label
)
if __name__ == "__main__":
demo.launch()
```
## `BottomBar`
### Initialization
<table>
<thead>
<tr>
<th align="left">name</th>
<th align="left" style="width: 25%;">type</th>
<th align="left">default</th>
<th align="left">description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>label</code></td>
<td align="left" style="width: 25%;">
```python
str | gradio.i18n.I18nData | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">name of the bottom bar. Not displayed to the user.</td>
</tr>
<tr>
<td align="left"><code>open</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">if True, bottom bar is open by default.</td>
</tr>
<tr>
<td align="left"><code>visible</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">If False, the component will be hidden.</td>
</tr>
<tr>
<td align="left"><code>elem_id</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
</tr>
<tr>
<td align="left"><code>elem_classes</code></td>
<td align="left" style="width: 25%;">
```python
list[str] | str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
</tr>
<tr>
<td align="left"><code>render</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
</tr>
<tr>
<td align="left"><code>height</code></td>
<td align="left" style="width: 25%;">
```python
int | str
```
</td>
<td align="left"><code>320</code></td>
<td align="left">The height of the bottom bar, specified in pixels if a number is passed, or in CSS units if a string is passed.</td>
</tr>
<tr>
<td align="left"><code>bring_to_front</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>False</code></td>
<td align="left">If True, the BottomBar will be rendered on top of all other elements with a higher z-index. Defaults to False.</td>
</tr>
<tr>
<td align="left"><code>key</code></td>
<td align="left" style="width: 25%;">
```python
int | str | tuple[int | str, Ellipsis] | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>
</tr>
<tr>
<td align="left"><code>preserved_by_key</code></td>
<td align="left" style="width: 25%;">
```python
list[str] | str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>
</tr>
</tbody></table>
### Events
| name | description |
|:-----|:------------|
| `expand` | This listener is triggered when the BottomBar is expanded. |
| `collapse` | This listener is triggered when the BottomBar is collapsed. |
Raw data
{
"_id": null,
"home_page": null,
"name": "gradio-bottombar",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": null,
"keywords": "gradio-custom-component, gradio-template-Sidebar",
"author": null,
"author_email": "Eliseu Silva <elismasilva@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/06/5d/09bbdcea52ce916f61042f4ca0c101acc66513af918bf353b237f43dde88/gradio_bottombar-0.0.1.tar.gz",
"platform": null,
"description": "---\ntags: [gradio-custom-component, SideBar]\ntitle: gradio_bottombar\nshort_description: A Bottom bar for Gradio Interface\ncolorFrom: blue\ncolorTo: yellow\nsdk: gradio\npinned: false\napp_file: space.py\n---\n\n# `gradio_bottombar`\n<img alt=\"Static Badge\" src=\"https://img.shields.io/badge/version%20-%200.0.1%20-%20orange\"> \n\nA Bottom bar for Gradio Interface\n\n## Installation\n\n```bash\npip install gradio_bottombar\n```\n\n## Usage\n\n```python\n# demo/app.py\n\nimport gradio as gr\nimport time\nfrom gradio_bottombar import BottomBar\n\ndef chat_response(message, history):\n history = history or \"\"\n history += f\"You: {message}\\n\"\n time.sleep(1) # Simulate thinking\n history += f\"Bot: Thanks for the message! You said: '{message}'\\n\"\n return history, \"\"\n\ndef update_label(value):\n return f\"Current temperature is: {value}\"\n\ncss = \"\"\"\nbody { \n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; \n margin: 0;\n padding: 0;\n}\n.gradio-container { \n border-radius: 15px;\n padding: 30px 40px;\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);\n margin: 40px 340px; \n}\n.gradio-container h1 { \n text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\n}\n.fillable {\n width: 100% !important;\n max-width: unset !important;\n}\n#examples_container {\n margin: auto;\n width: 90%;\n}\n#examples_row {\n justify-content: center;\n}\n#tips_row{ \n padding-left: 20px;\n}\n.sidebar { \n border-radius: 10px;\n padding: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n}\n.sidebar .toggle-button { \n background: linear-gradient(90deg, #34d399, #10b981) !important;\n border: none; \n padding: 12px 18px;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n border-radius: 5px;\n cursor: pointer;\n transition: transform 0.2s ease-in-out;\n}\n.toggle-button:hover {\n transform: scale(1.05);\n}\n.bottom-bar { \n border-radius: 10px;\n padding: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n}\n.bottom-bar .toggle-bottom-button { \n background: linear-gradient(90deg, #34d399, #10b981) !important;\n border: none; \n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px; \n cursor: pointer; \n}\n\n\"\"\"\n\nwith gr.Blocks(css=css, theme=gr.themes.Ocean(), title=\"Full Layout Demo\") as demo:\n gr.Markdown(\n \"\"\"\n # Full Layout Demo: BottomBar with Sidebars\n This demo shows the `BottomBar` with `bring_to_front=True`. Notice how it now renders\n **on top of** the sidebars when they overlap.\n \"\"\"\n )\n\n with BottomBar(open=True, height=180, bring_to_front=True):\n with gr.Row():\n message_box = gr.Textbox(\n show_label=False,\n placeholder=\"Type your message here...\",\n elem_id=\"message-input\",\n scale=7\n )\n send_button = gr.Button(\"Send\", variant=\"primary\", scale=1)\n with gr.Row():\n gr.Button(\"Upload File\")\n gr.Button(\"Record Audio\")\n gr.ClearButton([message_box])\n\n with gr.Row(equal_height=True):\n with gr.Sidebar(position=\"left\"):\n gr.Markdown(\"### \u2699\ufe0f Settings\")\n model_temp = gr.Slider(0, 1, value=0.7, label=\"Model Temperature\")\n temp_label = gr.Markdown(update_label(0.7))\n gr.CheckboxGroup(\n [\"Enable History\", \"Use Profanity Filter\", \"Stream Response\"],\n label=\"Chat Options\",\n value=[\"Enable History\", \"Stream Response\"]\n )\n\n with gr.Column(scale=3):\n gr.Markdown(\"### \ud83e\udd16 Chat Interface\")\n chatbot_display = gr.Textbox(\n label=\"Chat History\",\n lines=25,\n interactive=False\n )\n\n with gr.Sidebar(position=\"right\"):\n gr.Markdown(\"### \u2139\ufe0f Information\")\n gr.Radio(\n [\"GPT-4\", \"Claude 3\", \"Llama 3\"],\n label=\"Current Model\",\n value=\"Claude 3\"\n )\n gr.Dropdown(\n [\"English\", \"Spanish\", \"Portuguese\"],\n label=\"Language\",\n value=\"Portuguese\"\n )\n \n send_button.click(\n fn=chat_response,\n inputs=[message_box, chatbot_display],\n outputs=[chatbot_display, message_box]\n )\n message_box.submit(\n fn=chat_response,\n inputs=[message_box, chatbot_display],\n outputs=[chatbot_display, message_box]\n )\n model_temp.change(\n fn=update_label,\n inputs=model_temp,\n outputs=temp_label\n )\n\nif __name__ == \"__main__\":\n demo.launch()\n```\n\n## `BottomBar`\n\n### Initialization\n\n<table>\n<thead>\n<tr>\n<th align=\"left\">name</th>\n<th align=\"left\" style=\"width: 25%;\">type</th>\n<th align=\"left\">default</th>\n<th align=\"left\">description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"left\"><code>label</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | gradio.i18n.I18nData | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">name of the bottom bar. Not displayed to the user.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>open</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">if True, bottom bar is open by default.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>visible</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If False, the component will be hidden.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_id</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_classes</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nlist[str] | str | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>render</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>height</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | str\n```\n\n</td>\n<td align=\"left\"><code>320</code></td>\n<td align=\"left\">The height of the bottom bar, specified in pixels if a number is passed, or in CSS units if a string is passed.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>bring_to_front</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>False</code></td>\n<td align=\"left\">If True, the BottomBar will be rendered on top of all other elements with a higher z-index. Defaults to False.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>key</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | str | tuple[int | str, Ellipsis] | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>preserved_by_key</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nlist[str] | str | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>\n</tr>\n</tbody></table>\n\n\n### Events\n\n| name | description |\n|:-----|:------------|\n| `expand` | This listener is triggered when the BottomBar is expanded. |\n| `collapse` | This listener is triggered when the BottomBar is collapsed. |\n\n\n\n",
"bugtrack_url": null,
"license": null,
"summary": "A Bottom bar for Gradio Interface",
"version": "0.0.1",
"project_urls": null,
"split_keywords": [
"gradio-custom-component",
" gradio-template-sidebar"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "16ca8295a580aad32559a72db9d7b9efcdcfce47b40b90a01598c7a34643d894",
"md5": "001b5850a24c5e699f7439a65c9c1406",
"sha256": "d84b88b96ed37c085077db61bc99776a9ef9716f8057547559556d18125ee936"
},
"downloads": -1,
"filename": "gradio_bottombar-0.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "001b5850a24c5e699f7439a65c9c1406",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 82945,
"upload_time": "2025-07-30T01:14:06",
"upload_time_iso_8601": "2025-07-30T01:14:06.999174Z",
"url": "https://files.pythonhosted.org/packages/16/ca/8295a580aad32559a72db9d7b9efcdcfce47b40b90a01598c7a34643d894/gradio_bottombar-0.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "065d09bbdcea52ce916f61042f4ca0c101acc66513af918bf353b237f43dde88",
"md5": "b0e5cb63c6467c40f0fc2774c7b33159",
"sha256": "c2524305ff8401e8ceb87e5e934c750a624a749013f9d2f4490070d846ff26a6"
},
"downloads": -1,
"filename": "gradio_bottombar-0.0.1.tar.gz",
"has_sig": false,
"md5_digest": "b0e5cb63c6467c40f0fc2774c7b33159",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 145946,
"upload_time": "2025-07-30T01:14:08",
"upload_time_iso_8601": "2025-07-30T01:14:08.510790Z",
"url": "https://files.pythonhosted.org/packages/06/5d/09bbdcea52ce916f61042f4ca0c101acc66513af918bf353b237f43dde88/gradio_bottombar-0.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-07-30 01:14:08",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "gradio-bottombar"
}
JSON