Button (React)
Display a button widget
dp.button
dp.button(label, block=False, danger=False, disabled=False, ghost=False, href=None,
html_type='button', icon=None, loading=False, shape='default', size='middle',
target=None, type='default', on_click=None)
Parameters
| Parameter | Description |
|---|---|
| label (str) | Name of the button |
| block (bool) | Fits button width to its parent width |
| danger (bool) | Sets the status of the button to dangerous, rendering it appropriately |
| disabled (bool) | Disables the button |
| ghost (bool) | Make background transparent and invert text and border colors |
| href (Optional[str]) | URL to navigate to |
| html_type (ButonHtmlType) | Set the original html type of button. Can be either submit, reset or button |
| icon (Optional[IconType]) | The icon for the button object |
| loading (Union[bool, Annotated[int, Gt(0)]]) | Sets the loading status of the button. It could be either a boolean flag (loading on/off) or a integer value, which represents a delay in milliseconds for the button to enter in loading state after rendering |
| shape (ButtonShapeType) | Sets the shape of the button. Can be either default, circle or round |
| size (ButtonSizeType) | Size of the button. Can be either small, middle or large. If not properly defined, it is set to middle |
| target (Optional[Union[ButtonTargetType, str]]) | Specifies where to open the linked document when the button is clicked. This works when the href is specified, behaving similarly to the target attribute of an anchor <a> tag. Can be either _blank, _self, _parent or _top |
| type (ButtonType) | Sets the button type. Can be either primary, dashed, link, text or default |
| on_click (Optional[Callable]) | Trigger a Python function |
warning
Buttons require either a label or an icon parameter
Example
The example below shows how to create a basic button.
import shapelets.datapanel as dp
# Set up a dataApp
app = dp.dataApp()
app.title('Simple demo')
# Define and place the button
my_button = dp.button(label='shapelets_button', size='large')
app.place(my_button)
# Publish dataApp
dp.serve(app)
Try it yourself!
A common use case is to trigger an action once a button is pressed. We can achieve this with user-defined functions:
import shapelets.datapanel as dp
# Set up a dataApp
app = dp.dataApp()
txt = app.title('Trigger Button')
async def change_title() -> str:
"""Change the dataApp title."""
txt.text = 'New name!'
yield txt
# Define and place a button
my_button = app.button(label='trigger_button', on_click=change_title)
app.place(my_button)
# Publish dataApp
dp.serve(app)
info
Learn more about user-defined functions here