Implementing disabled button states with TailwindUI on NextJS app-CodePudding

I have a NextJS app that was using Atomic CSS and has a button that is disabled if a form is not filled out:

      <Button
        className="primary"
        onClick={handleCreateCommunity}
        disabled={!phone || !communityName}
      >
        Create
      </Button>

I want to change to using my new TailwindUI primary buttons style:

.primary-btn {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

Obviously, I need to apply className="primary" --- but I don't know how to make the disabled state work. Do I create another component that is like .btn-disabled? But then how do I apply that style when the form is not filled out?

EDIT:

This is what my index.css looks like:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .primary-btn {
        @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-300;
    }
 }

CodePudding user response：

You need to define styles for the

When disabled is true

Note: if you want to define the class attributes in css file you can do that by adding style in index.css file in @layer components.

@layer components {
  .primary-btn {
    @apply m-5 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-300;
  }
}

And then the className of Button becomes just primary-btn

 <button
      type="button"
      className="primary-btn"
      disabled={false} // your disable logic goes here
    >
      Primary
 </button>