Variable

buttonVariants`Const`

buttonVariants: (
props?: ConfigVariants<{ variant: { default: string; outline: string; secondary: string; ghost: string; destructive: string; link: string; }; size: { default: string; xs: string; sm: string; lg: string; icon: string; "icon-xs": string; "icon-sm": string; "icon-lg": string; }; }> & ClassProp,
) => string = ...

Class-name generator for the Button primitive.

Built with class-variance-authority so each combination of variant and size produces a fully-typed Tailwind class string. Exported so callers (e.g. <Link asChild> wrappers, custom triggers) can reuse the exact same styling without re-declaring it.

Variants:

default — solid filled button, primary brand color
outline — bordered, transparent background
secondary — softer secondary background
ghost — no background until hover/focus
destructive — red-tinted, reserved for irreversible actions
link — renders as a plain text link

Sizes:

xs / sm / default / lg — content-bearing sizes (icon or label)
icon / icon-xs / icon-sm / icon-lg — square icon-only buttons

Type Declaration

- (
  props?: ConfigVariants<{ variant: { default: string; outline: string; secondary: string; ghost: string; destructive: string; link: string; }; size: { default: string; xs: string; sm: string; lg: string; icon: string; "icon-xs": string; "icon-sm": string; "icon-lg": string; }; }> & ClassProp,
  ): string
- Parameters
  - Optionalprops: ConfigVariants<{ variant: { default: string; outline: string; secondary: string; ghost: string; destructive: string; link: string; }; size: { default: string; xs: string; sm: string; lg: string; icon: string; "icon-xs": string; "icon-sm": string; "icon-lg": string; }; }> & ClassProp
  Returns string

buttonVariantsConst

Type Declaration

Parameters

Returns string

Settings

buttonVariants`Const`