Variants

This function allows you to create a styled component with different variants based on the props you pass to it.

Basic syntax

interface AlertProps {
  $severity: "info" | "warning" | "error"
  $isActive?: boolean
}

const Alert = rc.div.variants<AlertProps>({
  base: "p-4 rounded-md",
  variants: {
    $severity: {
      info: (p) => `bg-blue-100 text-blue-800 ${p.$isActive ? "shadow-lg" : ""}`,
      warning: "bg-yellow-100 text-yellow-800",
      error: "bg-red-100 text-red-800",
    },
  },
  defaultVariants: {
    $severity: "info",
  },
})

The function receives the following properties:

base - optional - The base classname of the component
variants - required - An object with the different variants
defaultVariants - optional - a fallback for when no variant is passed

Implementation

<Alert $severity="warning" $isActive>Warning alert</Alert>

// renders:
// <button type="button" class="p-4 rounded-md bg-yellow-100 text-yellow-800 font-bold">Warning alert</button>