---
title: "BEM"
description: "Use cva to apply BEM class names instead of utility classes."
url: "https://cva.style/examples/bem/"
---

This example applies BEM class names with `cva` instead of utility classes.

styles.css

```css
.button {
  /* */
}


.button--primary {
  /* */
}
.button--secondary {
  /* */
}


.button--small {
  /* */
}
.button--medium {
  /* */
}


.button--primary-medium {
  /* */
}
```

```ts
import { cva } from "class-variance-authority";


const button = cva("button", {
  variants: {
    intent: {
      primary: "button--primary",
      secondary: "button--secondary",
    },
    size: {
      small: "button--small",
      medium: "button--medium",
    },
  },
  compoundVariants: [
    { intent: "primary", size: "medium", class: "button--primary-medium" },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});


button();
// => "button button--primary button--medium button--primary-medium"


button({ intent: "secondary", size: "small" });
// => "button button--secondary button--small"
```