Skip to content

button

A control that can trigger a function when pressed.

Properties

Name Type Default Description
label(★) str|Icon
dynamic
""

The label displayed in the button.

on_action Callback

The name of a function that is triggered when the button is pressed.
The parameters of that function are all optional:

  • state (State): the state instance.
  • id (optional[str]): the identifier of the button.
  • payload (dict): a dictionary that contains the key "action" set to the name of the action that triggered this callback.

active bool
dynamic
True

Indicates if this component is active.
An inactive component allows no user interaction.

id str

The identifier that will be assigned to the rendered HTML component.

properties dict[str, any]

Bound to a dictionary that contains additional properties for this element.

class_name str
dynamic

The list of CSS class names that will be associated with the generated HTML Element.
These class names will be added to the default taipy-<element_type>.

hover_text str
dynamic

The information that is displayed when the user hovers over this element.

(★)label is the default property for this visual element.

Styling

All the button controls are generated with the "taipy-button" CSS class. You can use this class name to select the buttons on your page and apply style.

Stylekit support

The Stylekit provides specific classes that you can use to style buttons:

  • secondary
    error
    warning
    success
    Buttons are normally displayed using the value of the color_primary Stylekit variable. These classes can be used to change the color used to draw the button, respectively, with the color_secondary, color_error, color_warning and color_success Stylekit variable values.

    The Markdown content:

    <|Error|button|class_name=error|><|Secondary|button|class_name=secondary|>
    

    Renders like this:

    Using color classes

  • plain
    The button is filled with a plain color rather than just outlined.

    The Markdown content:

    <|Button 1|button|><|Button 2|button|class_name=plain|>
    

    Renders like this:

    Using the plain class

  • fullwidth: The button is rendered on its own line and expands across the entire available width.

Usage

Simple button

The button label, which is the button control's default property, is simply displayed as the button text.

Definition

<|Button Label|button|>
<taipy:button>Button Label</taipy:button>
import taipy.gui.builder as tgb
...
tgb.button("Button Label")
A simple button

Specific action callback

Button can specify a callback function to be invoked when the button is pressed.

If you want some function called button_pressed() to be invoked when the user presses a button, you can define this function as follows:

def button_pressed(state):
  # React to the button press action

Then refer to this function in the definition of the control, as the value of the button's on_action property:

Definition

<|Button Label|button|on_action=button_pressed|>
<taipy:button on_action="button_pressed">Button Label</taipy:button>
import taipy.gui.builder as tgb
...
tgb.button("Button Label", on_action=button_pressed)