---
title: "Extending Components"
description: "Pass extra classes to a cva component with the class or className prop."
url: "https://cva.style/beta/getting-started/extending-components/"
---

All `cva` components provide an optional `class` **or** `className` prop, which can be used to pass additional classes to the component.

components/button.ts

```ts
import { cva } from "cva";


const button = cva({ base: "font-semibold" });


button({ class: "m-4" });
// => "font-semibold m-4"


button({ className: "m-4" });
// => "font-semibold m-4"
```

Extra classes may not override

Extra classes are appended to the generated string. With the default `cx`, their position does not make them override conflicting CSS rules. For Tailwind CSS overrides, choose a [class conflict strategy](https://cva.style/beta/getting-started/installation#handling-class-conflicts).