# Combination use of atomic class styles

You should use something like `class-variance-authority` to combine your styles

Here we take the `button` component as an example:

## Raw Js

```js
import { cva } from 'class-variance-authority'

const getButtonClassname = cva(['btn'], {
   variants: {
     type: {
       primary: ['btn-primary'],
       success: ['btn-success'],
       warning: ['btn-warning'],
       error: ['btn-error']
     },
     outline: {
       true: 'btn-outline'
     },
     size: {
       xs: ['btn-xs'],
       sm: ['btn-sm'],
       md: ['btn-md'],
       lg: ['btn-lg'],
       wide: ['btn-wide'],
       block: ['btn-block']
     },
     glass: {
       true: 'glass'
     },
     disabled: {
       true: 'btn-disabled'
     },
     shape: {
       square: ['btn-square'],
       circle: ['btn-circle']
     }
   },
   defaultVariants: {}
})
```

## React encapsulation example

```tsx filename="MyButton.tsx"
import { cva } from 'class-variance-authority'
import type { VariantProps } from 'class-variance-authority'
import type { FC, PropsWithChildren } from 'react'

const getButtonClassname = cva(['btn'], {
   variants: {
     type: {
       primary: ['btn-primary'],
       success: ['btn-success'],
       warning: ['btn-warning'],
       error: ['btn-error']
     },
     outline: {
       true: 'btn-outline'
     },
     size: {
       xs: ['btn-xs'],
       sm: ['btn-sm'],
       md: ['btn-md'],
       lg: ['btn-lg'],
       wide: ['btn-wide'],
       block: ['btn-block']
     },
     glass: {
       true: 'glass'
     },
     disabled: {
       true: 'btn-disabled'
     },
     shape: {
       square: ['btn-square'],
       circle: ['btn-circle']
     }
   },
   defaultVariants: {}
})

export type ButtonProps = PropsWithChildren<VariantProps<typeof getButtonClassname>>

const MyButton: FC<ButtonProps> = (props) => {
   return <button className={getButtonClassname(props)}>{props.children}</button>
}

export defaultMyButton
```