Creating a Badge Recipe

To create a recipe in Panda, we use the cva function, which creates Atomic Recipes.

Example of a Badge Recipe

Import cva and define the badge recipe using the base and variants properties.

import { cva } from '../styled-system/css'

const badgeRecipe = cva({
  base: {
    color: 'white',
    fontSize: '21px',
    fontWeight: 'bold',
    textTransform: 'uppercase',
  },
  variants: {
    status: {
      neutral: {
        bg: '#718096',
      },
      error: {
        bg: '#E53E3E',
      },
    },
    kind: {
      solid: {
        bg: '#718096',
      },
    },
  },
})

Usage of a Badge Recipe

Pass the recipe into the className of the required element.

function App() {
  return (
    <div>
      <div className={badgeRecipe({ status: 'neutral' })}>Badge</div>
    </div>
  )
}