Command Palette

Search for a command to run...

Components / Actions

Toggle

இருநிலை மாற்றி

A toggle represents a two-state action button that can be toggled on or off. Unlike a normal button which executes a one-shot action, a toggle holds its pressed state.

இருநிலை மாற்றியானது ஆன் அல்லது ஆஃப் செய்யக்கூடிய இருநிலை செயல் பொத்தானாகும்.

Variants

Component preview
Toggle variantsமாற்றி வடிவங்கள்

Anatomy

Structure

Anatomy

3 parts documented for implementation and review.

Component map
1

Container

கொள்கலன்required<button>

Standard interactive button container. Uses rounded-md corners, minimum 48px touch targets, and transitions. The active state adds a light tint and solid accent borders.

2

Label

உரைrequired

Clear action status indicator. Use simple nouns or categories (e.g., 'வடிவமைப்பு', 'குறியீடு').

3

ARIA pressed attribute

அணுகல் தன்மை ஆட்ரிபியூட்required

Critical aria-pressed attribute ('true' or 'false') to expose state representation to screen readers.

API

Props

3 props
pressed
Type
boolean
Default
false
Description
Whether the toggle is currently active.
onPressedChange
Type
(pressed: boolean) => void
Default
-
Description
State change listener callback.
className
Type
string
Default
-
Description
Custom classes.

Usage guidance

  • Always specify aria-pressed to expose states to accessibility assistive technology.
  • Toggles should be used when the state changes immediately without form submissions.

Best practices

Provide visual state indicators and text contrast
தெளிவான காட்சி மாற்றம் மற்றும் உரை வேறுபாடு கொடுங்கள்

Active and inactive states must be clearly distinct in color weight and border intensity.

மாற்றப்பட்டு மற்றும் மாற்றப்படாத நிலைகள் தெளிவாக வேறுபட வேண்டும்.

Don't rely on color alone to communicate active states
நிலை மாற்றத்தை நிறத்தால் மட்டுமே காட்டாதே

Colorblind users may miss the active state if there is no boundary contrast difference or accessibility label.

நிறக்குருடு உள்ளவர்கள் நிலை மாற்றங்களை எளிதாகப் புரிந்து கொள்ள ஏதுவாக எல்லையை தடிமனாக்கவும்.