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

Looking to reallocate information, paginate, and sort each time a new row is added to the mat-table

Error: inability to execute performanceMeasurement.startMeasurement due to its absence in the function definition

Issue encountered while trying to insert a new row into the mat-table

Having trouble with your start script crashing during your first Next.js project deployment on Heroku?

The error message "better-sqlite3 TypeError: o.default is not a constructor" indicates that

Accessing JSON data from a database using Angular

In order to showcase the data from the second JSON by using the unique identifier

How can we use getStaticProps() in Next.js to update intermittent modifications?

Encountering the error message "Required property 'src' is missing in image" while using Next.js image functionality

Inject props into a Component nested within a Higher-Order-Component (HOC)

Using next.js with GraphQL resulted in the following error: "Invariant Violation: Unable to locate the "client" in the context or passed in as an option..."

How can one retrieve data from two distinct API routes within a Next.js application?

Is there a way to make Typescript accept dot notation?

Do not apply tailwindcss styles to Material-UI

Steps to import an external script into a NextJS application and access it from the main bundle

Typescript: Declaring object properties with interfaces

What is preventing me from accessing a JSON file on Vercel while utilizing Next.js SSR?

Using NextJS with Storybook: The Issue with Optional Chaining

Validating image uploads using Yup and Formik in a standalone module

Issue: Module 'stylelint' not found in Angular Project