Button
Buttons are the interactive powerhouses of your UI. Use them to map action, make choices, and navigate your app.

We have two ways to create buttons:
1. Button element
<button type="button">Standard Button</button>
<button type="submit">Submit Form</button>
2. Anchor tag as button
<a href="https://piedpiper.retool.com/apps/pp-admin/{{ contact.id }}" class="button">Admin panel</a>
Use the anchor tag when your "button" needs to link to another page. Otherwise, stick with the <button>
element.
Disabled button
Buttons can have different states to indicate their current status:
<button class="button" disabled>Can't Click Me</button>
Copying values to clipboard
To add copy functionality to any element, simply add the data-copy
attribute with the value you want to copy. When clicked, the text will be automatically copied to the user's clipboard.
Basic example
<button data-copy="{{ api.key }}">Copy</button>
Best practices for buttons
Use clear, action-oriented text (e.g., "Save Changes" instead of "OK")
Use color and contrast to make important buttons stand out
Maintain adequate spacing between buttons to prevent accidental clicks
Was this helpful?