---
title: "11ty"
description: "Build a cva button component in an 11ty template with Tailwind CSS."
url: "https://cva.style/beta/examples/11ty/"
---

This example builds a `button` component with `cva` in an 11ty template.

## Tailwind CSS

button.11ty.js

```js
const { cva } = require("cva");


// ⚠️ Disclaimer: Use of Tailwind CSS is optional
const button = cva({
  base: "button",
  variants: {
    intent: {
      primary: [
        "bg-blue-500 text-white border-transparent",
        "hover:bg-blue-600",
      ],
      secondary: [
        "bg-white text-gray-800 border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: "py-1 px-2 text-sm",
      medium: "py-2 px-4 text-base",
    },
  },
  compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});


module.exports = function ({ label, intent, size }) {
  return `<button class="${button({ intent, size })}">${label}</button>`;
};
```