PlainButton

Usage

• Use PlainButton to build custom interactive elements that need their own visual design — gradient borders, custom backgrounds, animations, or other treatments not available through Button props.
• Use Button instead when the element should be visually recognizable as a standard button.
• Use PlainLink instead when the element is a custom hyperlink that does not need button features like loading states.
• PlainButton is an unstyled primitive — it provides no visual styling by default. Apply layout and appearance through Box props (display, px, py, borderRadius, cursor, etc.) or custom styles.

Types

• Regular — renders as a <button> element by default. Use for actions that don't navigate away from the current page. Requires onClick.
• Link — renders as an <a> element when href is provided. Use for navigation. External URLs receive safe attributes automatically when isExternal is set.

Behaviors

• Loading state (isLoading) — overlays a spinner on the button content and blocks interaction.
• Disabled state (isDisabled) — blocks interaction. Uses aria-disabled rather than the native disabled attribute.
• Auto-loading (autoLoading, default true) — automatically enters loading state when onClick returns a promise. Set to false to control loading state manually via isLoading.

Content

• Write labels that clearly describe the action or destination in 1-3 words.
• Pair icons with descriptive text labels.
• Never use vague labels like "Click" — state the specific action.
• Follow the same content guidelines as the Button component.

Implementation Notes

• PlainButton extends Box — all Box sprinkle props (spacing, layout, color, border) are available directly on the component.
• Polymorphic via as — pass a custom component to change the rendered element while retaining PlainButton behavior.
• Content access to state — React: children accepts a render function receiving { isLoading, isDisabled }. Ember: the default block yields { isLoading, isDisabled }.
• Link behavior — providing href (and the element is not disabled) automatically switches the rendered element to PlainLink/anchor. Use isExternal to add target="_blank" rel="noopener noreferrer". Use withSafeExternalAttributes={false} to suppress those attributes for protocols like mailto:.
• Use replace to trigger replaceState navigation instead of pushState when used with a link component provider.
• Ember invocation: <PlumaPlainButton> with @ args (e.g., @onClick, @isLoading, @isDisabled).