Migrating Styled Component

Styled Components

We'll start with a styled component for a button that utilizes a $primary prop to toggle styles.

const Button = styled.button<{ $primary?: boolean; }>`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: '#BF4F74';
  margin: 0 1em;
  padding: 0.25em 1em;

  ${props =>
    props.$primary &&
    css`
      background: '#BF4F74';
      color: white;
    `};

Create a Button Recipe

First, translate the styled component into a Panda CSS recipe.

Next, define the base styles and introduce variants for different visual states.

const buttonRecipe = cva({
  base: {
    background: 'transparent',
    borderRadius: '3px',
    border: '2px solid #BF4F74',
    color: '#BF4F74',
    margin: '0 1em',
    padding: '0.25em 1em',
  },
  variants: {
    primary: {
      true: {
        background: '#BF4F74',
        color: 'white',
      },
    },
  },
})

Improve Variants Flexibility

Introduce a more versatile kind variant that expands options beyond primary.

Next, refactor to include a secondary variant and set a defaultVariant to secondary for fallback styles.

const buttonRecipe = cva({
  base: {
    borderRadius: '3px',
    border: '2px solid #BF4F74',
    margin: '0 1em',
    padding: '0.25em 1em',
  },
  variants: {
    kind: {
      primary: {
        background: '#BF4F74',
        color: 'white',
      },
      secondary: {
        background: 'transparent',
        color: '#BF4F74',
      },
    },
  },
  defaultVariant: {
    kind: 'secondary',
  },
})