buttons

Button

A versatile, minimalist button component with support for multiple aesthetic variants, sizes, and states.

buttonvariantsprimarysecondaryoutlineghostinteractive

▶Preview

Select Color & Active Theming

All variants pair and style dynamically matching the “zinc” color family:

Sizes

Inactive States

🖲Usage

example-usage.tsx

import { Button } from "@/components/kanso/button"

export default function ButtonDemo() {
  return (
    <div className="flex gap-4">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary" color="blue">Secondary Blue</Button>
      <Button variant="outline">Outline</Button>
    </div>
  )
}

↓Installation

Create folder & copy source

Create a folder named kanso inside your project's components directory (i.e. components/kanso/). Copy the source code shown in the next section, and paste it into a file named button.tsx inside it.

Required helper files

Ensure your project has the following helper files configured:

→lib/utils

<>Source Code

button.tsx

import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  'inline-flex shrink-0 items-center justify-center rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40 disabled:cursor-not-allowed active:scale-[0.98]',
  {
    variants: {
      variant: {
        primary: 'shadow-sm',
        secondary: 'shadow-2xs',
        outline: 'border bg-transparent shadow-3xs',
        ghost: '',
        link: 'underline-offset-4 hover:underline p-0 h-auto rounded-none active:scale-100',
      },
      size: {
        default: 'h-9.5 px-4 py-2',
        sm: 'h-8.5 rounded-md px-3 text-xs',
        lg: 'h-11 rounded-lg px-6 text-base',
        icon: 'size-9.5',
      },
      color: {
        zinc: '',
        blue: '',
        emerald: '',
        violet: '',
        amber: '',
        rose: '',
      },
    },
    compoundVariants: [
      // Zinc
      {
        color: 'zinc',
        variant: 'primary',
        className:
          'bg-zinc-950 text-zinc-50 hover:bg-zinc-800 dark:bg-zinc-50 dark:text-zinc-950 dark:hover:bg-zinc-200 focus-visible:ring-zinc-400',
      },
      {
        color: 'zinc',
        variant: 'secondary',
        className:
          'bg-zinc-100 text-zinc-900 hover:bg-zinc-200/80 dark:bg-zinc-900 dark:text-zinc-50 dark:hover:bg-zinc-800/80 focus-visible:ring-zinc-400',
      },
      {
        color: 'zinc',
        variant: 'outline',
        className:
          'border-zinc-200 text-zinc-900 hover:bg-zinc-50 dark:border-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-900/60 focus-visible:ring-zinc-400',
      },
      {
        color: 'zinc',
        variant: 'ghost',
        className:
          'hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-900 dark:hover:text-zinc-50 focus-visible:ring-zinc-400',
      },
      {
        color: 'zinc',
        variant: 'link',
        className:
          'text-zinc-900 dark:text-zinc-50 focus-visible:ring-zinc-400',
      },

      // Blue
      {
        color: 'blue',
        variant: 'primary',
        className:
          'bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 focus-visible:ring-blue-400',
      },
      {
        color: 'blue',
        variant: 'secondary',
        className:
          'bg-blue-50 text-blue-900 hover:bg-blue-100 dark:bg-blue-950/40 dark:text-blue-200 dark:hover:bg-blue-950/60 focus-visible:ring-blue-400',
      },
      {
        color: 'blue',
        variant: 'outline',
        className:
          'border-blue-200 text-blue-600 hover:bg-blue-50/50 dark:border-blue-900/60 dark:text-blue-400 dark:hover:bg-blue-950/20 focus-visible:ring-blue-400',
      },
      {
        color: 'blue',
        variant: 'ghost',
        className:
          'text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-950/30 focus-visible:ring-blue-400',
      },
      {
        color: 'blue',
        variant: 'link',
        className:
          'text-blue-600 dark:text-blue-400 focus-visible:ring-blue-400',
      },

      // Emerald
      {
        color: 'emerald',
        variant: 'primary',
        className:
          'bg-emerald-600 text-white hover:bg-emerald-500 dark:bg-emerald-500 dark:hover:bg-emerald-400 focus-visible:ring-emerald-400',
      },
      {
        color: 'emerald',
        variant: 'secondary',
        className:
          'bg-emerald-50 text-emerald-900 hover:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-200 dark:hover:bg-emerald-950/60 focus-visible:ring-emerald-400',
      },
      {
        color: 'emerald',
        variant: 'outline',
        className:
          'border-emerald-200 text-emerald-600 hover:bg-emerald-50/50 dark:border-emerald-900/60 dark:text-emerald-400 dark:hover:bg-emerald-950/20 focus-visible:ring-emerald-400',
      },
      {
        color: 'emerald',
        variant: 'ghost',
        className:
          'text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/30 focus-visible:ring-emerald-400',
      },
      {
        color: 'emerald',
        variant: 'link',
        className:
          'text-emerald-600 dark:text-emerald-400 focus-visible:ring-emerald-400',
      },

      // Violet
      {
        color: 'violet',
        variant: 'primary',
        className:
          'bg-violet-600 text-white hover:bg-violet-500 dark:bg-violet-500 dark:hover:bg-violet-400 focus-visible:ring-violet-400',
      },
      {
        color: 'violet',
        variant: 'secondary',
        className:
          'bg-violet-50 text-violet-900 hover:bg-violet-100 dark:bg-violet-950/40 dark:text-violet-200 dark:hover:bg-violet-950/60 focus-visible:ring-violet-400',
      },
      {
        color: 'violet',
        variant: 'outline',
        className:
          'border-violet-200 text-violet-600 hover:bg-violet-50/50 dark:border-violet-900/60 dark:text-violet-400 dark:hover:bg-violet-950/20 focus-visible:ring-violet-400',
      },
      {
        color: 'violet',
        variant: 'ghost',
        className:
          'text-violet-600 hover:bg-violet-50 dark:text-violet-400 dark:hover:bg-violet-950/30 focus-visible:ring-violet-400',
      },
      {
        color: 'violet',
        variant: 'link',
        className:
          'text-violet-600 dark:text-violet-400 focus-visible:ring-violet-400',
      },

      // Amber
      {
        color: 'amber',
        variant: 'primary',
        className:
          'bg-amber-600 text-white hover:bg-amber-500 dark:bg-amber-500 dark:text-zinc-950 dark:hover:bg-amber-400 focus-visible:ring-amber-400',
      },
      {
        color: 'amber',
        variant: 'secondary',
        className:
          'bg-amber-50 text-amber-900 hover:bg-amber-100 dark:bg-amber-950/40 dark:text-amber-200 dark:hover:bg-amber-950/60 focus-visible:ring-amber-400',
      },
      {
        color: 'amber',
        variant: 'outline',
        className:
          'border-amber-200 text-amber-600 hover:bg-amber-50/50 dark:border-amber-900/60 dark:text-amber-400 dark:hover:bg-amber-950/20 focus-visible:ring-amber-400',
      },
      {
        color: 'amber',
        variant: 'ghost',
        className:
          'text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/30 focus-visible:ring-amber-400',
      },
      {
        color: 'amber',
        variant: 'link',
        className:
          'text-amber-600 dark:text-amber-400 focus-visible:ring-amber-400',
      },

      // Rose
      {
        color: 'rose',
        variant: 'primary',
        className:
          'bg-rose-600 text-white hover:bg-rose-500 dark:bg-rose-500 dark:hover:bg-rose-400 focus-visible:ring-rose-400',
      },
      {
        color: 'rose',
        variant: 'secondary',
        className:
          'bg-rose-50 text-rose-900 hover:bg-rose-100 dark:bg-rose-950/40 dark:text-rose-200 dark:hover:bg-rose-950/60 focus-visible:ring-rose-400',
      },
      {
        color: 'rose',
        variant: 'outline',
        className:
          'border-rose-200 text-rose-600 hover:bg-rose-50/50 dark:border-rose-900/60 dark:text-rose-400 dark:hover:bg-rose-950/20 focus-visible:ring-rose-400',
      },
      {
        color: 'rose',
        variant: 'ghost',
        className:
          'text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/30 focus-visible:ring-rose-400',
      },
      {
        color: 'rose',
        variant: 'link',
        className:
          'text-rose-600 dark:text-rose-400 focus-visible:ring-rose-400',
      },
    ],
    defaultVariants: {
      variant: 'primary',
      size: 'default',
      color: 'zinc',
    },
  }
);

interface ButtonProps
  extends
    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
    VariantProps<typeof buttonVariants> {
  /** Inactive state rendering the button disabled */
  inactive?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, color, inactive, ...props }, ref) => {
    return (
      <button
        ref={ref}
        disabled={inactive}
        className={cn(buttonVariants({ variant, size, color, className }))}
        {...props}
      />
    );
  }
);

Button.displayName = 'Button';

export { Button, buttonVariants };
export type { ButtonProps };

≡Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "link"`	`"primary"`	The visual style variant of the button.
`color`	`"zinc" \| "blue" \| "emerald" \| "violet" \| "amber" \| "rose"`	`"zinc"`	The color theme of the button across its variants.
`size`	`"default" \| "sm" \| "lg" \| "icon"`	`"default"`	The height and padding scale of the button.
`inactive`	`boolean`	`false`	When true, disables interactions and styles the button as inactive.
`children`required	`React.ReactNode`	—	The content (text, label, or icons) inside the button.
`className`	`string`	—	Additional CSS classes to apply custom overrides.

← PrevFeature Grid Card Overview Next →Magnetic Button