CODEWITHSUNDEEP
typescriptnext.jstailwind-csstailwind-ui
reallymemorable
reallymemorable

Reputation: 1024

Implementing disabled button states with TailwindUI on NextJS app

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;
    }
 }

Upvotes: 4

Views: 9614

Answers (3)

gyurisc
gyurisc

Reputation: 11502

Not sure if this going to help you, but here is a simple approach. I am just using styles directly on my button and to render the disabled state I do this:

    <Button
    className="disabled:bg-gray-600 bg-green-600 hover:bg-green-700"
    onClick={handleCreateCommunity}
    disabled={!phone || !communityName}
  >
    Create
  </Button>

Upvotes: 2

krishnaacharyaa
krishnaacharyaa

Reputation: 25070

If you are looking an easy switch from atomic-css to tailwind-css i prefer you use button component provided by tailwind-css

Follow this rough pattern to get your desired result.

<button
  type="button"
  className=" /* enable class attributes */
               disabled: /* disabled class attributes*/ "
  disabled={/* disable logic in true or false */}
>

Hence your final code goes like :

<button
  type="button"
  className=" 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"
  onClick={handleCreateCommunity}
  disabled={!phone || !communityName} // your disable logic goes here
>
  Primary
</button>

Ouput :

When disabled is false :

enter image description here

When disabled is true

enter image description here

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>

Upvotes: 2

Sean W
Sean W

Reputation: 6648

You need to define styles for the disabled state just like you do with focus.

Edit: You are not using directives based on your comment. They are essential because they override default tailwind styles during compile, so they are not duplicated and they also purge unused custom styles at build.

Custom styles must be imported after the layer they are applied to. In your case after @tailwind components.

@tailwind components;

@layer components {
 .primary-btn {
  @apply disabled:bg-blue-300;
 }
}

Upvotes: 5

Related Questions