Thành phần

Toggle

Two-state button on Base UI Toggle; pressed shown by an ink fill and aria-pressed, never colour alone.

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/toggle

Usage

tsx

import { BoldIcon } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

<Toggle variant="outline" aria-label="Bold">
  <BoldIcon aria-hidden="true" />
</Toggle>
<Toggle defaultPressed>Save story</Toggle>

Icon-only toggles need an aria-label. Use pressed and onPressedChange to control the state.

States

State	Treatment
Off	Ink text; the outline variant adds a 1px ink border
Pressed	Solid ink fill, paper text, `aria-pressed="true"`
Press (unpressed)	`tint-1` fill while the button is held down; there is no hover effect
Focus	2px ink outline, 2px offset
Disabled	Halftone text and border, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move focus to and from the toggle (disabled toggles are skipped)
Enter	Toggle pressed state
Space	Toggle pressed state

Vietnamese

Ink adaptation

Upstream shadcn's radius, shadow and accent fill are removed. Pressed becomes the brand's selected treatment, an ink fill. Hover styling is dropped (controls change on press or focus). Every size keeps a 44px hit target. Built on Base UI Toggle; toggleVariants is exported for toggle-group.