How can I get the type of intent?

[trevorpfiz]

Hi! I am trying to pass an intent, but I am getting TypeScript errors.

Type 'string' is not assignable to type '"primary" | "secondary" | "tertiary" | null | undefined'.

<Button href={href} intent={intent} className="mt-2 max-w-fit px-10 py-3 text-lg uppercase" > Get Started </Button>

const buttonStyles = cva( '', { variants: { intent: { primary: 'bg-pink-400 text-white hover:bg-pink-500', secondary: 'bg-blue-400 text-white hover:bg-blue-500', tertiary: 'bg-green-400 text-white hover:bg-green-500', }, defaultVariants: { intent: 'primary', }, } );

How would I be able to get the type of intent without having to manually type out the string literal? I want to be able to pass in an intent prop and if I update the Button component the intent type will update as well.

Currently I am manually updating a type export type Intent = 'primary' | 'secondary' | 'tertiary' | null | undefined;

Thanks!

[joe-bell]

https://github.com/joe-bell/cva#variantprops

You can use VariantProps to extract the type, and then pick off the type like a standard object (YourType[‘intent’])

// components/button.ts
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";

/**
 * Button
 */
export type ButtonProps = VariantProps<typeof button>;
export type ButtonIntent = ButtonProps['intent']

export const button = cva(/* … */);