[feat]: Button behavior

[ghost]

Feature description

In a recent project, I needed to add a new behavior to the button component, which is quite simple to do using ShadCN. Later, when I started another project, I felt the need for the same feature again and thought it might be useful if this behavior was part of the default ShadCN package.

The change I made to my button component was straightforward; I added a new behavior attribute. Here's how it turned out:

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
      behavior: {
        fit: "w-fit",
        full: "w-full",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      behavior: "fit",
    },
  }
)

I added the property to the arguments like this: ({ className, variant, size, behavior, asChild = false, ...props }, ref)
And the corresponding component setup: className={cn(buttonVariants({ variant, size, behavior, className }))}

To render a button it's like that:

<Button>Regular</Button>
<Button behavior="full">Full width</Button>

I’d like to know your thoughts on whether this is a change worth implementing. I didn’t create a PR because I’m not entirely sure where exactly to do this in the ShadCN codebase, so I thought it’d be better to ask for your opinion first.

Affected component/components

Button

Additional Context

It's very helpfull

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

[GebruikerR]

I feel like unless it is a combination of multiple styles it is not worth adding this.