Button
Four sizes and five variants, with a 0.98 press scale.
import { Plus, Trash, ArrowRight } from '@phosphor-icons/react/dist/ssr';
import { Button } from '@/components/ui/button';
export default function ButtonDemo() {
return (
<div className="flex flex-col items-center gap-4">
<div className="flex flex-wrap items-center justify-center gap-2">
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger"><Trash /> Delete</Button>
</div>
<div className="flex flex-wrap items-center justify-center gap-2">
<Button size="xs">XS</Button>
<Button size="sm">SM</Button>
<Button size="md"><Plus /> MD</Button>
<Button size="lg">LG <ArrowRight /></Button>
<Button size="icon" variant="secondary" aria-label="Add"><Plus /></Button>
</div>
</div>
);
}
Installation
import { cva, type VariantProps } from 'class-variance-authority';
import { twMerge } from 'tailwind-merge';
import type { ButtonHTMLAttributes } from 'react';
export const buttonVariants = cva(
'cds-focus inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium select-none ' +
'transition-[background-color,color,box-shadow,transform] duration-[120ms] ease-cds active:scale-[0.98] ' +
'disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0',
{
variants: {
variant: {
primary: 'bg-accent-brand text-accent-fg hover:bg-accent-hover',
secondary: 'bg-ghost-selected text-text-primary hover:bg-hairline-strong',
ghost: 'bg-transparent text-text-secondary hover:bg-ghost-hover hover:text-text-primary',
outline: 'bg-transparent text-text-primary shadow-[inset_0_0_0_1px_var(--cds-border-strong)] hover:bg-ghost-hover',
danger: 'bg-danger text-white hover:opacity-90',
},
size: {
xs: 'h-6 px-2 text-xs rounded-md [&_svg]:size-3.5',
sm: 'h-7 px-2.5 text-[13px] rounded-lg [&_svg]:size-4',
md: 'h-8 px-3 text-sm rounded-lg [&_svg]:size-4',
lg: 'h-10 px-4 text-[15px] rounded-xl [&_svg]:size-[18px]',
icon: 'size-8 rounded-lg [&_svg]:size-4',
},
},
defaultVariants: { variant: 'primary', size: 'md' },
},
);
export function Button({
className,
variant,
size,
...props
}: ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>) {
return <button className={twMerge(buttonVariants({ variant, size }), className)} {...props} />;
}
Usage
import { Button } from "@/components/ui/button";
<Button variant="secondary" size="sm">Secondary</Button>| Prop | Values | Default |
|---|---|---|
variant | primary secondary outline ghost danger | primary |
size | xs sm md lg icon | md |