PiRetryButton

A specialized button component for retry operations with loading, success, and error states.

Features

• Multiple States: Supports idle, loading, success, and error states
• Auto-reset: Automatically resets from success state after a configurable delay
• State Icons: Shows different icons based on the current state
  • Idle: Retry icon (↻)
  • Loading: Pi-spinner component
  • Success: Checkmark
  • Error: Warning triangle
• Display Modes: Supports standard, condensed, and icon-only layouts
• Tooltips: Icon-only mode automatically shows a tooltip with the current state label (customizable)
• Optional Notes: Display helpful text below the button
• Flexible: Supports primary, secondary, tertiary, and entity button types
• Events: Dispatches pi-retry-click event when clicked

Installation

pnpm add @polarityio/pi-retry-button

Basic Usage

<!-- Standard button -->
<pi-retry-button label="Retry" state="idle"></pi-retry-button>

<!-- Condensed button -->
<pi-retry-button label="Retry" state="idle" condensed></pi-retry-button>

<!-- Icon-only button (shows tooltip on hover) -->
<pi-retry-button label="Retry" state="idle" icon-only></pi-retry-button>

<!-- Icon-only with custom tooltip -->
<pi-retry-button label="Retry" state="idle" icon-only tooltip="Retry the last operation"></pi-retry-button>

<!-- With note -->
<pi-retry-button label="Retry" state="idle" note="Click to retry the operation"></pi-retry-button>

Properties

| Property | Type | Default | Description | | ------------------- | ---------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------- | | label | string | "Retry" | The label displayed on the button | | state | "idle" | "loading" | "success" | "error" | "idle" | The current state of the retry operation | | disabled | boolean | false | Whether the button is disabled | | successLabel | string | "Success" | Text displayed in success state | | errorLabel | string | "Error" | Text displayed in error state | | successResetDelay | number | 2000 | Milliseconds to wait before resetting from success state (0 = no auto-reset) | | type | "primary" | "secondary" | "tertiary" | "entity" | "primary" | Button type and visual style | | condensed | boolean | false | Whether the button is displayed in a condensed (smaller) style | | iconOnly | boolean | false | Whether to show only the icon without a label. Automatically shows a tooltip | | tooltip | string | "" | Custom tooltip text for icon-only mode. Falls back to the current state label | | note | string | "" | Optional note displayed below the button |

Events

pi-retry-click

Fired when the button is clicked in the idle state.

element.addEventListener('pi-retry-click', (event) => {
  console.log('Retry clicked');
  // Perform retry operation
});

Usage Example

const retryButton = document.querySelector('pi-retry-button');

// Listen for retry clicks
retryButton.addEventListener('pi-retry-click', async () => {
  retryButton.state = 'loading';
  try {
    await performAsyncOperation();
    retryButton.state = 'success';
    // Will auto-reset to 'idle' after successResetDelay ms
  } catch (error) {
    retryButton.state = 'error';
  }
});

Reload Use Case

The component works equally well as a reload button for refreshing data in forms or panels:

<pi-retry-button
  label="Reload"
  success-label="Reloaded!"
  error-label="Reload Failed"
  state="idle"
  icon-only
  condensed
  type="tertiary"
></pi-retry-button>

Styling

The component uses CSS variables for theming. See CSS_VARIABLES.md for available variables.

Browser Support

Requires:

• Modern browsers with Web Components support
• Lit 3.0+
• Font Awesome 7 SVG icons