Bật/tắt

Nút bật/tắt hai trạng thái dành cho các chức năng định dạng thanh công cụ, tắt tiếng và ghim — với hiệu ứng viền và bóng theo phong cách tân thô mộc.

import { BookmarkIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

Toggle là một nút hai trạng thái — được nhấn hoặc không — giữ trạng thái bật hiển thị cho đến khi được bấm lần nữa. Được xây dựng trên thành phần Base UI Toggle và tạo kiểu theo công thức neobrutalist: viền dày, bóng đổ đậm và kiểu chữ đậm.

Nên dùng khi:

Định dạng trong trình soạn thảo — các nút đậm, nghiêng, gạch chân trên thanh công cụ soạn văn bản.
Hành động bật/tắt đơn lẻ — tắt tiếng, yêu thích, ghim, theo dõi; trạng thái được nhấn kiêm luôn vai trò chỉ báo.
Tùy chọn hiển thị — hiện lưới, xuống dòng tự động, chia đôi màn hình; dùng nhiều nút và gom chúng vào một Toggle Group.

Cài đặt


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/toggle.json
npx shadcn@latest add https://neobrutalism.com/r/base/toggle.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/toggle.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/toggle.json

Cài đặt các dependency sau:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Sao chép và dán đoạn mã sau vào dự án của bạn.

components/ui/toggle.tsx

"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Toggle as TogglePrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

const toggleVariants = cva(
  "group/toggle inline-flex items-center justify-center gap-1 rounded border-2 text-sm font-head font-medium whitespace-nowrap shadow-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground hover:translate-y-0.5 active:translate-y-1 active:shadow-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-pressed:bg-primary aria-pressed:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-background",
        outline: "bg-background",
      },
      size: {
        default:
          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Toggle({
  className,
  variant = "default",
  size = "default",
  ...props
}: React.ComponentProps<typeof TogglePrimitive.Root> &
  VariantProps<typeof toggleVariants>) {
  return (
    <TogglePrimitive.Root
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Toggle, toggleVariants }

Cập nhật các đường dẫn import cho phù hợp với cấu hình dự án của bạn.

Cách dùng

import { Toggle } from "@/components/ui/toggle"

<Toggle>Toggle</Toggle>

Ví dụ

Outline

Dùng variant="outline" cho kiểu viền.

import { BoldIcon, ItalicIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

Có văn bản

import { ItalicIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

Kích thước

Dùng prop size để thay đổi kích thước của toggle.

import { Toggle } from "@/components/ui/toggle"

export function ToggleSizes() {

Vô hiệu hóa

import { Toggle } from "@/components/ui/toggle"

export function ToggleDisabled() {

RTL

Để bật hỗ trợ RTL trong Neobrutalism, xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập

Toggle tuân theo biến thể nút bật/tắt của mẫu Button của WAI-ARIA: nó render một <button> native với aria-pressed phản ánh trạng thái hiện tại, nên trình đọc màn hình đọc nó là “đã nhấn” hoặc “chưa nhấn”. Hãy đảm bảo các toggle chỉ có biểu tượng mang một aria-label.

Tương tác bàn phím:

Phím	Hành động
`Tab` / `Shift + Tab`	Di chuyển focus vào / ra khỏi toggle
`Space` / `Enter`	Bật/tắt trạng thái nhấn

Tham chiếu API

Xem tài liệu Base UI Toggle.