Creating custom disabled button styles using TailwindUI in a NextJS application

Question

Creating custom disabled button styles using TailwindUI in a NextJS application

I had a NextJS application that utilized Atomic CSS and featured a button which becomes disabled if a form is left unfilled:

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

Now, I am looking to switch to using the new TailwindUI primary button 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;
}

However, I am facing an issue with applying the disabled state. Do I need to create another component like .btn-disabled? If so, how can I then apply that style when the form remains incomplete?

--

UPDATE:

Here is what my index.css file currently 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;
    }
 }

typescript next.js tailwind-css tailwind-ui

Answer 1

Answer №1

It is important to define specific styles for the disabled state, just like you would with the focus state.

Note: Your use of directives seems to be missing based on your feedback. These directives are crucial as they can override default tailwind styles during compilation, preventing duplication and clearing out unused custom styles at build time.

Make sure to import custom styles after applying them to the appropriate layer. In this case, it should come after @tailwind components.

@tailwind components;

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

Answer 2

It is important to define specific styles for the disabled state, just like you would with the focus state.

Note: Your use of directives seems to be missing based on your feedback. These directives are crucial as they can override default tailwind styles during compilation, preventing duplication and clearing out unused custom styles at build time.

Make sure to import custom styles after applying them to the appropriate layer. In this case, it should come after @tailwind components.

@tailwind components;

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

Answer 3

Answer №2

If you're interested in transitioning easily from `atomic-css` to `tailwind-css`, I recommend utilizing the `button` component provided by `tailwind-css`.

Here's a basic pattern to achieve your desired outcome:

<button
  type="button"
  className=" /* add class attributes */
               disabled: /* add disabled class attributes*/ "
  disabled={/* logic for enabling or disabling */}
>

So, your final code would look something like this:

<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 here
>
  Primary
</button>

Output :

When disabled is false :

https://i.stack.imgur.com/6s3y7s.png

When disabled is true

https://i.stack.imgur.com/kDXMts.png

Note: If you prefer defining class attributes in a CSS file, you can accomplish that by including styles in the index.css file under `@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;
  }
}

Then, the button's className simplifies to just `primary-btn`

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

Answer 4

If you're interested in transitioning easily from `atomic-css` to `tailwind-css`, I recommend utilizing the `button` component provided by `tailwind-css`.

Here's a basic pattern to achieve your desired outcome:

<button
  type="button"
  className=" /* add class attributes */
               disabled: /* add disabled class attributes*/ "
  disabled={/* logic for enabling or disabling */}
>

So, your final code would look something like this:

<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 here
>
  Primary
</button>

Output :

When disabled is false :

https://i.stack.imgur.com/6s3y7s.png

When disabled is true

https://i.stack.imgur.com/kDXMts.png

Note: If you prefer defining class attributes in a CSS file, you can accomplish that by including styles in the index.css file under `@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;
  }
}

Then, the button's className simplifies to just `primary-btn`

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

Answer 5

Answer №3

Perhaps you'll find this approach helpful. Instead of using separate styles for a disabled button, I opt to apply styles directly to my button element as shown below:

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

Answer 6

Perhaps you'll find this approach helpful. Instead of using separate styles for a disabled button, I opt to apply styles directly to my button element as shown below:

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

Creating custom disabled button styles using TailwindUI in a NextJS application

Answer №1

Answer №2

Answer №3

Similar questions

Break apart the string and transform each element in the array into a number or string using a more specific type inference

Tips for maintaining the 'client use' code snippet at the beginning of your Vs Code script

Inquiry regarding the implementation of DTO within a service layer parameter

Achieving the functionality of making only one list item in the navbar bolded upon being clicked using React and Typescript logic

Diverse Selection of Font Awesome Icons

MUI Gradient Tracked Button

Exploring the capabilities of UIGrid in conjunction with TypeScript DefinitelyTyped has been a

Arranging Alphanumeric Characters in Angular in Ascending Order

Issue with Angular filtering when utilizing pipe and mapping the response

I'm encountering an issue with this error message: "Warning: Each item in a list must be assigned a unique 'key' prop."

What is the best way to link this to a function in AngularIO's Observable::subscribe method?

Tips for passing parameters from an anchor click event in TypeScript

Challenges Arising from Adding Extra Information to User Session with NextAuth in Next.js

Issue: Module './App' not found in webpackSolution: Check if the module path is

The comparison between using Reflect.decorate and manual decorating in TypeScript

Strategies for modifying the bound value in Angular with an observable object

Using GraphQL in React to access a specific field

Submit information by utilizing' content-type': 'application/x-www-form-urlencoded' and 'key': 'key'

Using a static value in the comparator is necessary for Array.find to function properly in Typescript

How can we set up the Typescript Compiler to recognize typings and modules effectively?