Thành phần

Button

Ink-fill, outline, secondary, ghost, link and destructive (✕ icon) buttons; 44px hit targets.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/button

Usage

tsx

import { Button, buttonVariants } from "@/components/ui/button";

<Button>Read the edition</Button>
<Button variant="destructive">Delete project</Button>
<a href="/archive" className={buttonVariants({ variant: "outline" })}>Archive</a>

States

State	Treatment
Default	Ink fill, paper text, 1px ink border
Hover / press	Inverts to paper fill and ink text; the border stays, so nothing shifts
Outline, ghost hover	`tint-1` fill
Focus	2px ink outline, 2px offset
Disabled	Halftone text and border, `cursor-not-allowed`
Destructive	Ink fill, ✕ icon and a confirming label; never red

Keyboard

Key	Action
Tab / Shift+Tab	Move focus to and from the button (disabled buttons are skipped)
Enter	Activate
Space	Activate

Vietnamese

Ink adaptation

Upstream shadcn's radius, shadow, focus ring glow and red destructive are removed. Sizes xs and the small icon sizes are dropped, because every size keeps a 44px hit target. Built on Base UI Button.