Creating an Alert Recipe

To create a slot recipe, instead of the cva function, use the sva function.

In this lesson, we'll build out a slot recipe for an alert component.

Based on our Figma design, the alert component consists of a root, icon, title and description.

Here's a quick breakdown of how to define the alert Recipe with the slots.

const alertRecipe = sva({
  slots: ['root', 'icon', 'title', 'description'],
  base: {
    root: {
      px: '16px',
      py: '12px',
    },
    icon: {
      width: '24px',
      height: '24px',
    },
    title: {
      fontWeight: 'bold',
      fontSize: '16px',
    },
    description: {
      fontSize: '16px',
    },
  },
  variants: {
    status: {
      info: {
        root: {
          colorPalette: 'blue',
        },
      },
    },
...
})