Status Button
A button component that extends the base Button with status indicators. Shows different icons based on the current status (pending, success, error, idle) and supports tooltips for status messages.
Installation
Import
Usage
The StatusButton component is perfect for form submissions, API calls, save operations, and any action that has a clear success or error state. Use it to provide immediate visual feedback to users about the status of their actions. The pending state shows a spinning icon, success shows a checkmark, and error shows a cross icon. Tooltips can provide additional context about the status.
Design Guidelines
The status button extends the base Button component with status indicators. The status icon appears to the right of the button text. When a message is provided, hovering over the status icon shows a tooltip with additional information. The pending state uses a delayed spin animation to avoid showing spinners for very quick operations. Use this component consistently throughout your application for actions that have clear outcomes.
Basic Usage
Status button in idle state
Pending State
Status button showing loading/pending state
Success State
Status button showing success with checkmark icon
Error State
Status button showing error with cross icon
Colors
Status button with different color variants
With Status Messages
Status button with tooltip messages
All States
Demonstration of all status states with appropriate colors
StatusButton
StatusButton extends Button with status indicators. Shows different icons based on the current status (pending, success, error, idle) and supports tooltips for status messages. extends Button. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
status | "pending" | "success" | "error" | "idle" | - | Current status of the button. Determines which icon is displayed |
message | string | undefined | Optional message to display in a tooltip when hovering over the status icon |
spinDelay | Parameters<typeof useSpinDelay>[1] | undefined | Optional configuration for the spin delay when status is pending |
className | string | — | Additional CSS classes to apply to the component |