Button
A button or a component that looks like a button.
Overview
Use a button for actions. A button should do something on the current page, submit a form, open a menu, start a task, or confirm a choice.
Use a link when the user is navigating to another page. If a link must look like a button, render the link through the button component so the visual style is shared while the semantics stay correct.
Anatomy
A button has a visible label, optional icon, variant, size, and state. The label should describe the action directly. Prefer Save changes, Invite member, or Delete project over vague labels like Submit or Continue when the result is specific.
Variants
Use the default variant for primary actions, secondary for supporting actions, outline for medium emphasis, ghost for low emphasis, link for inline actions, and destructive for dangerous actions.
Accessibility
Buttons must have accessible names. Icon-only buttons need a label through text, aria-label, or an equivalent pattern. Keep disabled and loading states clear so users understand why the action is unavailable.
Installation
npx love-ui@latest add buttonUsage
import { Button } from "@/components/ui/button"<Button>Button</Button>Link
You can use the render prop to make another component look like a button. Here's an example of a link that looks like a button.
import Link from "next/link"
import { Button } from "@/components/ui/button"
export function LinkAsButton() {
return <Button render={<Link href="/login" />}>Login</Button>
}Examples
The examples show variants, sizes, icon layouts, disabled state, link rendering, and loading behavior.