Button
A component to display a button and allows a user to trigger an action.
Installation
npx shadcn@latest add @tetra-ui/buttonUsage
import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
import { ChevronRightIcon } from "@/components/ui/icons";<Button>
<ButtonText>Button</ButtonText>
</Button>Variants
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>Icon button
Use size="icon", size="icon-sm", or size="icon-lg" with ButtonIcon for icon-only buttons:
<Button size="icon" variant="outline">
<ButtonIcon>
<ChevronRightIcon />
</ButtonIcon>
</Button>Loading state
Set busy to show a spinner and disable interaction while an action is in progress:
<Button busy>
<ButtonText>Saving…</ButtonText>
</Button>Changelog
2025-12-03 Icon sizes
Added additional icon size variants: icon-sm, icon-lg.
2026-02-05 Fixed spinner styles
Fixed spinner styles and minor adjustments to the button styling.