PlainButton
GithubPlainButton is an unstyled wrapper component that creates a button element with minimal styling. It's used internally by Pluma to build other button components.
Usage
You probably won't need to use this component much. This is used in Pluma internally to build other button components.
When an href prop is provided, PlainButton automatically renders as a link instead of a button element.
You can import the component via:
Link functionality
When you provide an href prop, PlainButton automatically renders as a link:
Loading functionality
PlainButton supports loading states and automatic loading detection when onClick returns a promise:
When loading, PlainButton applies the plainButtonIsLoading CSS class and disables interactions. You can style this class to show loading indicators as needed.
State access
PlainButton yields an object with the following properties:
isLoading- a boolean indicating whether the button is in a loading stateisDisabled- a boolean indicating whether the button is disabled
API
PlumaPlainButton extends Box
If true, the button will automatically show the spinner when the onClick function is called and it returns a promise.
If false, the spinner will only show if the isLoading prop is set to true. By default, this is true.
The URL passed into the link component (or a tag)
Disables the button. Use this instead of the native disabled prop, to make sure non-button elements (when used with as) get the correct styles
When this flag is true, an a tag will be used instead of the provider's linkComponent, even if it exists.
Additionally, target="_blank" rel="noopener noreferrer" will be added automatically
Shows a spinner in the button overlaid on top of the button's content. The button will act as if disabled while in the loading state.
The function to call when the button is clicked
This is passed into the provider's linkComponent.
It can be used by the link component implementation to handle replaceState instead of pushState
This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer".
This can be used for links to other protocols like mailto: