Button

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

Button.png

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>

Button aspect

You can add classes to indicate specific visual treatment. We currently support ghost, warning and danger both in light and dark mode.

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

  1. Use clear, action-oriented text (e.g., "Save Changes" instead of "OK")

  2. Use color and contrast to make important buttons stand out using the ghost, warning and danger classes

  3. Maintain adequate spacing between buttons to prevent accidental clicks

Was this helpful?