Nuxt•3w ago

i'd like to see a perfect example on how to add a custom variant to a button please

please show me the details of this example using the app.config.ts configuration

11 Replies

Hi @acidjazz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add a custom variant to a button in Nuxt UI using the app.config.ts configuration, you need to extend the variants object for the button component in your app.config.ts file. Here’s a complete example:

// app.config.ts
export default defineAppConfig({
  ui: {
    button: {
      variants: {
        // Add your custom variant here
        myCustom: 'bg-purple-600 text-white hover:bg-purple-700 font-extrabold border-2 border-purple-800'
      }
    }
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    button: {
      variants: {
        // Add your custom variant here
        myCustom: 'bg-purple-600 text-white hover:bg-purple-700 font-extrabold border-2 border-purple-800'
      }
    }
  }
})

Then, you can use your custom variant in your template:

<template>
  <UButton variant="myCustom" label="Custom Button" />
</template>

<template>
  <UButton variant="myCustom" label="Custom Button" />
</template>

This will apply your custom Tailwind classes to the button whenever you use variant="myCustom". How it works:
- The variants object in app.config.ts allows you to define new variants or override existing ones. - The value for your custom variant is a string of Tailwind CSS classes that will be applied to the button. - You can now use this variant anywhere in your app by referencing its name in the variant prop. This approach is directly supported by Nuxt UI’s theming system, which merges your custom configuration with the default theme, allowing for global and maintainable customization. For more details, see the official documentation on component theme configuration. If you want to override slot-specific classes or add more advanced logic, you can also use the slots and compoundVariants keys in the same way. But for a simple custom variant, the above example is all you need. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@207763045764562945> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Omnislash•3w ago

@kapa.ai show an exemple for nuxt UI 3.

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! Here’s how you can add a custom variant to a button in Nuxt UI 3 using the app.config.ts configuration:

// app.config.ts
export default defineAppConfig({
  ui: {
    button: {
      variants: {
        // Add your custom variant here
        myCustom: {
          base: 'bg-purple-600 text-white hover:bg-purple-700 font-extrabold border-2 border-purple-800'
        }
      }
    }
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    button: {
      variants: {
        // Add your custom variant here
        myCustom: {
          base: 'bg-purple-600 text-white hover:bg-purple-700 font-extrabold border-2 border-purple-800'
        }
      }
    }
  }
})

Then, use your custom variant in your template:

<template>
  <UButton variant="myCustom" label="Custom Button" />
</template>

<template>
  <UButton variant="myCustom" label="Custom Button" />
</template>

How it works:
- The variants object in app.config.ts allows you to define new variants or override existing ones. - The value for your custom variant is a string of Tailwind CSS classes that will be applied to the button. - You can now use this variant anywhere in your app by referencing its name in the variant prop. This approach is supported by Nuxt UI’s theming system, which merges your custom configuration with the default theme, allowing for global and maintainable customization. For more details, see the official documentation on component theme configuration. If you want to override slot-specific classes or add more advanced logic, you can also use the slots and compoundVariants keys in the same way. But for a simple custom variant, the above example is all you need. Reference:
Component theme config example ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Omnislash•3w ago

@kapa.ai my editor shows an error when I try using my custom variant

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If your editor shows an error when you try to use your custom variant for a Nuxt UI button, it is likely because the type definitions for the variant prop do not automatically include custom variants you add in app.config.ts. This is a known limitation: Nuxt UI’s type system is based on the default variants and does not dynamically infer custom variants from your configuration file. This means that while your custom variant will work at runtime (the classes will be applied and the button will render as expected), your editor or TypeScript may show a type error or warning because it doesn't recognize "myCustom" as a valid value for the variant prop. What you can do: - You can safely ignore this type error if you are sure your configuration is correct. The custom variant will still be applied at runtime. - If you want to avoid the error, you can use // @ts-expect-error or // @ts-ignore above the line where you use the custom variant, but this is optional and only suppresses the warning. Summary:
This is a limitation of the current Nuxt UI type system and is not an error in your configuration. The knowledge sources do not mention a way to extend the type definitions automatically for custom variants, so this is expected behavior for now. Your custom variant will still work as intended at runtime, even if your editor complains about the type. For more on customizing component themes, see the Nuxt UI theme documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

acidjazzOP•3w ago

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for your feedback. Based on the knowledge sources provided, Nuxt UI allows you to customize and extend component variants using the app.config.ts file. However, the documentation does not mention a way to extend the TypeScript types for the variant prop to include your custom variant names. The error you are seeing:

Type '"myCustom"' is not assignable to type '"solid" | "outline" | "soft" | "subtle" | "ghost" | "link" | undefined'.

Type '"myCustom"' is not assignable to type '"solid" | "outline" | "soft" | "subtle" | "ghost" | "link" | undefined'.

is expected, because the type definitions for the variant prop are statically defined and do not automatically include custom variants added via configuration. The documentation does not provide a solution for extending these types at the type level. Despite the type error, your custom variant will work at runtime as described in the theming documentation. You may need to suppress the TypeScript error if you want to use custom variant names, as there is no documented way to extend the type definitions for variants in Nuxt UI 3 at this time Powerful component customization. If you need strict type safety for custom variants, the knowledge sources do not provide a solution for this scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@207763045764562945> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

i'd like to see a perfect example on how to add a custom variant to a button please

Did you find this page helpful?