Button

Displays a button or a component that looks like a button.

Preview
Code

import { Button } from '@/components/ui/button';

export const Basic = () => {
  return <Button>Button</Button>;
};

Installation

CLI
Manual

npx borristw-ui@latest add button

yarn borristw-ui@latest add button

pnpm borristw-ui@latest add button

Install the following dependencies:

npm i @ark-ui/react

yarn add @ark-ui/react

pnpm add @ark-ui/react

Copy and paste the following code into your project.

import * as React from 'react';
import { ark } from '@ark-ui/react';
import { tv, type VariantProps } from 'tailwind-variants';

import { cn } from '@/lib/utils';

const buttonVariants = tv({
  base: 'inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
  variants: {
    variant: {
      default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
      destructive:
        'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
      outline:
        'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
      secondary:
        'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
      ghost: 'bg-transparent hover:bg-accent hover:text-accent-foreground',
      link: 'text-primary bg-transparent underline-offset-4 hover:underline',
    },
    size: {
      default: 'h-9 px-4 py-2',
      sm: 'h-8 rounded-md px-3 text-xs',
      lg: 'h-10 rounded-md px-8',
      icon: 'h-9 w-9',
    },
  },
  defaultVariants: {
    variant: 'default',
    size: 'default',
  },
});

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return (
      <ark.button
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  },
);
Button.displayName = 'Button';

export { Button, buttonVariants };

Update the import paths to match your project setup.

Usage

import { Button } from '@/components/ui/button';

<Button variant="outline">Button</Button>

Link

You can use the buttonVariants helper to create a link that looks like a button.

import { buttonVariants } from '@/components/ui/button';

<Link className={buttonVariants({ variant: 'outline' })}>Click here</Link>

Alternatively, you can set the asChild parameter and nest the link component.

<Button asChild>
  <Link href="/login">Login</Link>
</Button>

Examples

import { Button } from '@/components/ui/button';

export const ButtonVariants = () => {
  return (
    <>
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </>
  );
};

With different sizes

Preview
Code

import { Button } from '@/components/ui/button';

export const ButtonSizes = () => {
  return (
    <>
      <Button size="lg">lg</Button>
      <Button>Default</Button>
      <Button size="icon">icon</Button>
      <Button size="sm">sm</Button>
    </>
  );
};

Render as Child

Preview
Code

import { Button } from '@/components/ui/button';

export const ButtonAsChild = () => {
  return (
    <Button asChild>
      <a href="/login" className="no-underline">
        Login
      </a>
    </Button>
  );
};