Button Widget
Button Widget lets you render input as clickable buttons, enabling users to make selections directly in your workflow.
Component description
How the Button Widget component works
Button Widget Component
The Button Widget is a flow component designed to render text as a clickable button within your AI workflow interface. This component enables user interactions by allowing input or action selection via buttons, making it valuable for building engaging and interactive AI-driven applications, such as chatbots, guided workflows, or decision trees.
What the Component Does
At its core, the Button Widget takes input text and displays it as a clickable button. Optionally, you can provide a title message above the button(s), which supports Markdown formatting for richer presentation. When a user clicks the button, it triggers the output, which can be used to drive subsequent steps or logic in your workflow.
Inputs
| Name | Type | Required | Description | Advanced | Default Value |
|---|---|---|---|---|---|
| Input | Message | Yes | The input to optionally use as the button’s text. | No | (empty) |
| Button Text | String | No | The text displayed on the button. If not set, it uses the input value. | No | {input} |
| Title Message | String | No | An optional message (supports Markdown) shown above the button(s). | Yes | (empty) |
- Input: Main content, can accept messages which may be rendered as button labels.
- Button Text: Custom label for the button; if omitted, defaults to the value of Input.
- Title Message: Optional text displayed at the top of the button list, with Markdown support for formatting.
Outputs
| Name | Type | Description |
|---|---|---|
| Buttons | Message | Output emitted when a button is clicked. |
The component outputs a Message when a user interacts with the rendered button, which can be used to trigger further actions or pass data to the next component in your workflow.
Use Cases and Benefits
- User Interaction: Easily add interactive elements to your AI workflows, allowing users to make selections or confirm actions.
- Guided Experiences: Build step-by-step guided flows, surveys, or menu systems where users navigate by clicking buttons.
- Dynamic Responses: Customize button labels and display messages dynamically based on previous workflow steps.
Summary
The Button Widget component is a versatile tool for introducing interactivity into your AI workflows. With customizable labels and optional Markdown-formatted titles, it helps you create user-friendly interfaces that can collect input, drive branching logic, or enhance user engagement in AI-powered applications.
Examples of flow templates using Button Widget component
To help you get started quickly, we have prepared several example flow templates that demonstrate how to use the Button Widget component effectively. These templates showcase different use cases and best practices, making it easier for you to understand and implement the component in your own projects.
Frequently asked questions
- What does the Button Widget component do?
It displays input text as clickable buttons, allowing users to make selections that drive your flow logic.
- Can I customize the button text?
Yes, you can specify what text appears on each button with the 'Button Text' field, using inputs or static values.
- Is Markdown supported in the title?
Yes, you can format the title message above the buttons using Markdown for better presentation.
- Where can I use the Button Widget?
It's ideal for chatbots, automated workflows, or any scenario where you need users to choose an option or provide input interactively.
- Does the Button Widget support multiple buttons?
Yes, you can render multiple buttons in a list, each representing different options for the user.
Enhance Your Workflow with Button Widget
Add interactive buttons to your flows and build engaging, user-friendly automations with FlowHunt.
Learn more
