Recipe as JSX

Convert Recipe to JSX Component

Use the styled factory to transform a recipe into a JSX component

import { styled } from '../styled-system/jsx'

export const badgeRecipe = cva({
  //define recipe
})

const Badge = styled('div', badgeRecipe)

Pass Style Props to Component

For example, to change the background color of the badge, we can pass an orange.500 color.

<Badge bg="orange.500" status="neutral" kind="solid">
  Badge
</Badge>