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>

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

3. Maintain adequate spacing between buttons to prevent accidental clicks