How can I disable the button in design as well?-CodePudding

What I'm trying to do is to disable a button in style after the user has added 2 input boxes for a client. I'm using Tailwind CSS Currently, the button is disabled after 2 boxes are added, but I want to disable it in a style as well, to make it gray for example.

<button className="btn-main" 
        disabled={this.state.items.length >= 2} 
        onClick={this.handleClick.bind(this)}>
            <PlusSmIcon className="h-5 w-5 mr-2" />
            Add Clinet(s)
</button>

How can I do it?

CodePudding user response：

Pass a class or styles on disabled condition:

Approach # 1

<button className={`btn-main ${this.state.items.length >= 2 && 'disabled'}`} 
        disabled={this.state.items.length >= 2} 
        onClick={this.handleClick.bind(this)}>
            <PlusSmIcon className="h-5 w-5 mr-2" />
            Add Clinet(s)
</button>

Approach # 2 by adding conditional styles in style props but still I will recommend you approach 1

  <button className="btn-main"
        style={{color:this.state.items.length >= 2?"red":"white"}}
        disabled={this.state.items.length >= 2} 
        onClick={this.handleClick.bind(this)}>
            <PlusSmIcon className="h-5 w-5 mr-2" />
            Add Clinet(s)
</button>

CodePudding user response：

Well using css you can add bellow style for the element that will avoid all kinds of click events

pointer-events: none

You can also make it generic by adding a disabled attribute to the button and then add bellow styles to your css file.

button[disabled='true']{
 pointer-events: none
}

CodePudding user response：

you can prefix tailwind classes with disabled: (eg. disabled:border-red-500) for styles you want to apply when a button/input/etc is disabled.

you might need to enable this in your tailwind.config.js file like so:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      opacity: ['disabled'],
      border: ['disabled'],
      // add any tailwind classes you wish to enable disabled: on here  
    }
  },
}

Otherwise, you can target a disabled button with regular CSS:

.btn-main {
  // regular button styles
}

.btn-main:disabled {
  // these styles will be applied to any disabled buttons with the .btn-main class
}