A simple, dynamic 'button' element.
- Toggle on/off loading state and disable error state
- Show/hide an error message
import button from 'ff-core/button'
button({
loadingText: 'Thinking...' // text to display within button when loading (default is 'Saving...')
, buttonText: 'Do it!' // text to display on button when not loading (default is 'Submit')
, error$: flyd.stream() // stream of error messages to display above button
, loading$: flyd.stream() // stream of Boolean values of whether to enter a loading state
})When an error message is present on the error stream, then the error will be shown. When the error stream has null or a falsey value on it, then no errors are displayed.
When the loading stream has any truthy value on it, then the button is disabled and its loading text is shown. When the loading stream has any falsey value on it, then the button is re-enabled and the normal text shown.
See ./index.css for example CSS selectors you can use. ./index.css is a basic utility theme and can be included with postcss-import by doing @import 'ff-core/button/index.css';.
This button is intended to be used as a form submit button, so put it in a form and capture the submit events on the form.