Button

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.

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.

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.

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.

npx honestui@latest add button

import { Button } from "@/components/ui/button"

<Button>Button</Button>

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>
}

Our examples cover variants, sizes, icon layouts, disabled state, link rendering, and loading behavior.

Default

Outline

Secondary

Destructive

Destructive Outline

Ghost

Link

Extra-small Size

Small Size

Large Size

Extra-large Size

Disabled

Icon

Icon Small Size

Icon Large Size

With Icon

With Link

Loading