Chuyển tới nội dung
werewolf-ui
Component

Toggle

A button that turns a formatting option or view mode on or off. The selected state uses a soft accent fill.

Xem trước

Props

  • variant
  • size
  • disabled
  • iconOnly
  • defaultPressed
  • label
  • icon
import { Toggle } from "@/components/ui/toggle"

<Toggle>Pin item</Toggle>

Cách dùng

Khi nào dùng

  • Turn one option on or off, such as pinning an item or applying emphasis.
  • Keep a toolbar action selected until the user turns it off.

Khi nào không dùng

  • An action with no persistent on state. Use Button.
  • A setting submitted in a form. Use Switch.
  • Related selection options. Use ToggleGroup.

Biến thể

variant

Transparent when off, or a surface with a neutral border for outline.

  • defaultmặc định

  • outline

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

<Toggle>Pin item</Toggle>
<Toggle variant="outline">Pin item</Toggle>

size

Control height, text and icon size, the same steps as Button: sm 28px, md 32px (the default), lg 36px, xl 44px with a mouse; on touch md is 36px, lg 44px and xl 48px. Small controls keep a minimum hit area.

  • sm

  • mdmặc định

  • lg

  • xl

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

<Toggle size="sm">Pin item</Toggle>
<Toggle>Pin item</Toggle>
<Toggle size="lg">Pin item</Toggle>
<Toggle size="xl">Pin item</Toggle>

Ví dụ

Formatting

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

<Toggle>Bold</Toggle>

Selected initially

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

<Toggle variant="outline" defaultPressed>Grid view</Toggle>

Icon only

import { IconBold } from "@tabler/icons-react"
import { Toggle } from "@/components/ui/toggle"

<Toggle iconOnly aria-label="Bold">
  <IconBold size={16} />
</Toggle>

Disabled selection

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

<Toggle disabled defaultPressed>Locked format</Toggle>

Nên và không nên

Nên

  • Use a stable label that names the option.
  • Use iconOnly with aria-label for compact formatting controls.

Không nên

  • Do not use a Toggle for an action that has no persistent state.
  • Do not use it for a setting that applies at once; use Switch.

Props

TênKiểuGiá trịMặc địnhMô tả
variantenumdefault | outlinedefaultTransparent when off, or a surface with a neutral border for outline.
sizeenumsm | md | lg | xlmdControl height, text and icon size, the same steps as Button: sm 28px, md 32px (the default), lg 36px, xl 44px with a mouse; on touch md is 36px, lg 44px and xl 48px. Small controls keep a minimum hit area.
disabledboolean-falsePrevents focus and selection and uses disabled colors.
iconOnlyboolean-falseMakes the button square. Requires aria-label on an icon-only button.
pressedboolean--Controlled on or off state. Pair with onPressedChange.
defaultPressedboolean-falseInitial state when uncontrolled.
onPressedChangefunction--Receives the requested boolean state after activation.

Cấu tạo

PhầnMô tả
rootThe toggle button, transparent by default or a bordered surface in outline. On uses the soft accent pair.
iconAn optional decorative icon, 16px in sm, md and lg and 20px in xl.
hitAreaA transparent pseudo-element that extends the button target to size-target-min.

Khả năng truy cập

Role: button

PhímHành động
Space, EnterToggles pressed state.
TabMoves focus to the next control.
  • Text children provide the accessible name. iconOnly requires aria-label.
  • aria-pressed exposes the on or off state. Keep the label stable when state changes.
  • The button defaults to type="button" and does not submit its form.
  • Pass size and weight to every icon. Use regular off and optionally fill on.

Cài đặt

npx shadcn add https://werewolf-ui.vercel.app/r/toggle.json

Lệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").