There is no clear way to disable a button

I have a form with button and when submitting the form I’ll like to disable all the components because there might be an error return from the server in which can I’ll re-enable the components to allow the user to correct the input and submit it again.

Currently I don’t see any way to disable to button except of removing the onClick which does not seem like the right way.

Expected Behavior

I think it will be better to have the disabled attribute be settable so we could disable the button.

[ghost]

I bow before the HOR (higher order reason) that prevents the Button component to have a simple disabled property, but for everyone that isn’t that enlightend in UX philosopy, the following wrapper might come in handy:

import React from 'react'
import Button from 'grommet/components/Button'
import _ from 'underscore'

export default (props) => {
    const newProps = props.disabled ? Object.assign({}, _.omit(props, 'onClick')) : props
    return (
        <Button {...newProps} />
    )
}

[tracybarmore]

Hi @ido-ran, Grommet has a showcase app that uses a pattern for a processing/validating state of a form.

• Go to http://ferret.grommet.io/settings/edit
• Click ‘Connect’ next to Directory
• Type in anything in Directory Server input field, Click Connect
• Button is replaced by spinner and verb of action

Let us know if this answers your question and if we can close this issue. Thanks!