Button
A button component that can be rendered as another tag or focusable when disabled.
import { Button } from '@/components/ui/button';
export function ButtonDefault() {
return <Button>Button</Button>;
}
Installation
Usage
import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>Cursor
Tailwind v4 switched from cursor: pointer to cursor: default for the button component.
If you want to keep the cursor: pointer behavior, add the following code to your CSS file:
@layer base {
button:not(:disabled),
[role='button']:not(:disabled) {
cursor: pointer;
}
}Examples
Outline
import { Button } from '@/components/ui/button';
export function ButtonOutline() {
return <Button variant='outline'>Outline</Button>;
}
<Button variant="outline">Outline</Button>Secondary
import { Button } from '@/components/ui/button';
export function ButtonSecondary() {
return <Button variant='secondary'>Secondary</Button>;
}
<Button variant="secondary">Secondary</Button>Ghost
import { Button } from '@/components/ui/button';
export function ButtonGhost() {
return <Button variant='ghost'>Ghost</Button>;
}
<Button variant="ghost">Ghost</Button>Link
import { Button } from '@/components/ui/button';
export function ButtonLink() {
return <Button variant='link'>Link</Button>;
}
<Button variant="link">Link</Button>Icon
import { Button } from '@/components/ui/button';
import { ChevronRightIcon } from 'lucide-react';
export function ButtonIcon() {
return (
<Button size='icon' variant='outline'>
<ChevronRightIcon />
</Button>
);
}
<Button size="icon" variant="outline">
<ChevronRightIcon />
</Button>With Icon
The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.
import { Button } from '@/components/ui/button';
import { ArrowRightIcon } from 'lucide-react';
export function ButtonWithIcon() {
return (
<Button variant='outline'>
Enter <ArrowRightIcon />
</Button>
);
}
<Button variant="outline">
Enter <ArrowRightIcon />
</Button>