MC UI - MC Button

Preview

import { McButton } from "../ui/mc-button";

export default function McButtonDemo() {
  return <McButton>Button</McButton>;
}

import { McButton } from "../ui/mc-button";export default function McButtonDemo() {  return <McButton>Button</McButton>;}

Installation

CLI

npx mc-ui@latest add mc-button

pnpm dlx mc-ui@latest add mc-button

yarn dlx mc-ui@latest add mc-button

bunx mc-ui@latest add mc-button

Manual

Install the following dependencies

npm install clsx tailwind-merge @radix-ui/react-slot class-variance-authority

pnpm add clsx tailwind-merge @radix-ui/react-slot class-variance-authority

yarn add clsx tailwind-merge @radix-ui/react-slot class-variance-authority

bun add clsx tailwind-merge @radix-ui/react-slot class-variance-authority

Add a classname utility function

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};

Copy and paste the following code into your project

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost:
          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
        icon: "size-9",
        "icon-sm": "size-8",
        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function McButton({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : "button"

  return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { McButton, buttonVariants }

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default: "bg-primary text-primary-foreground hover:bg-primary/90",        destructive:          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",        "icon-sm": "size-8",        "icon-lg": "size-10",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function McButton({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { McButton, buttonVariants }

Update the import paths to match your project setup

Usage

import { McButton } from "@/components/ui/mc-button"

export default function Example() {
  return <McButton>Click me</McButton>
}

Examples

Variants

<McButton variant="default">Default</McButton>
<McButton variant="secondary">Secondary</McButton>
<McButton variant="destructive">Destructive</McButton>
<McButton variant="outline">Outline</McButton>
<McButton variant="ghost">Ghost</McButton>
<McButton variant="link">Link</McButton>

Sizes

<McButton size="sm">Small</McButton>
<McButton size="default">Default</McButton>
<McButton size="lg">Large</McButton>

Icon Buttons

import { ArrowRight } from "lucide-react"

<McButton size="icon-sm" variant="outline">
  <ArrowRight />
</McButton>
<McButton size="icon" variant="outline">
  <ArrowRight />
</McButton>
<McButton size="icon-lg" variant="outline">
  <ArrowRight />
</McButton>

With Icons

import { ArrowRight } from "lucide-react"

<McButton>
  <ArrowRight />
  Button with Icon
</McButton>
<McButton variant="outline">
  Button with Icon
  <ArrowRight />
</McButton>

As Child (Polymorphic)

Use asChild to render the button as a different element or component:

<McButton asChild>
  <a href="https://microclub.info">Visit MicroClub</a>
</McButton>

API Reference

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	`"default"`	The visual style of the button
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"default"`	The size of the button
`asChild`	`boolean`	`false`	Renders the button as a child element (polymorphic)
`className`	`string`	`undefined`	Additional CSS classes

All other props from React.ComponentProps<"button"> are also supported.

MC Button

On this page