Button variants
Also called button styles, button types, or button hierarchy
A set of button styles, such as primary, secondary, outline, ghost, destructive, and link, that shows which action on a screen matters most.
import { Button as BaseButton } from '@base-ui/react/button';
const VARIANTS = {
primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
outline: 'border bg-background hover:bg-muted',
ghost: 'hover:bg-muted',
destructive: 'bg-red-600 text-white hover:bg-red-700',
link: 'text-blue-600 underline-offset-4 hover:underline'
};
const SIZES = {
sm: 'h-8 px-3 text-sm',
md: 'h-10 px-4 text-sm',
lg: 'h-12 px-5 text-base'
};
type ButtonProps = Omit<BaseButton.Props, 'className'> & {
variant?: keyof typeof VARIANTS;
size?: keyof typeof SIZES;
className?: string;
};
export function Button({
variant = 'primary',
size = 'md',
className = '',
...props
}: ButtonProps) {
return (
<BaseButton
{...props}
className={`inline-flex items-center justify-center gap-2 rounded-lg font-medium whitespace-nowrap outline-none transition-[background-color,scale] duration-150 select-none focus-visible:ring-3 focus-visible:ring-ring/50 active:scale-[0.97] data-disabled:pointer-events-none data-disabled:opacity-50 ${VARIANTS[variant]} ${SIZES[size]} ${className}`}
/>
);
}
// One primary action per screen; the rest step back.
// <Button>Publish</Button>
// <Button variant='outline'>Preview</Button>
// <Button variant='ghost' size='sm'>Cancel</Button>Create a Button component with variants primary, secondary, outline, ghost, destructive, and link, and sizes sm (32px tall), md (40px), and lg (48px). Primary uses the brand blue and destructive uses red; every variant darkens slightly on hover, scales to 0.97 while pressed, and shows a 3px focus ring for keyboard users. Use only one primary button per screen.
Paste into Layerwise or any AI coding tool.
What is Button variants?
Button variants are versions of the same button that differ in fill, color, and border. A filled primary button draws the eye first. A gray secondary or an outline button sits one step back, a ghost button shows only its label until you hover it, and a link button looks like text. A red destructive variant marks actions that delete something or cannot be undone.
Use variants to rank the actions on a screen. Give each view one primary button for the main thing people came to do, such as Publish or Save changes, and make the rest secondary, outline, or ghost. When two buttons look equally loud, people have to stop and read both.
Size is usually a separate option from variant: small buttons fit toolbars and table rows, large ones suit hero sections and phones. Keep touch targets at least 44px tall on mobile, and give every variant clear hover, pressed, focus, and disabled states with enough text contrast against its fill.
Often confused with
- Interaction states
- Interaction states are how a single button changes as you hover, press, or focus it. Variants are different buttons for actions of different importance.
Related terms
All termsInteraction states
The set of looks a control takes as people use it, such as default, hover, pressed, focused, and disabled, each showing what will happen.
Press feedback
A quick visual response, usually a slight shrink, that shows a button registered the press the moment a finger or mouse button goes down.
Hover effect
A visual change, such as a lift, glow, or zoom, that happens when the mouse pointer moves over an element to show it can be clicked.
Focus ring
An outline that marks which element has keyboard focus, so people moving through a page with the Tab key can see where they are.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.