ToggleButton()

ToggleButton(__namedParameters): Element

ToggleButton - A button component that maintains pressed/unpressed state

Provides accessible toggle functionality with visual feedback for the current state. Perfect for features like favorites, bookmarks, switches, or any binary state controls. Includes icon support and integrates with React Aria for keyboard navigation and accessibility.

Parameters

__namedParameters

ToggleButtonProps

Returns

Element

Examples

// Basic toggle button
<ToggleButton>Toggle Feature</ToggleButton>

// Controlled toggle button with different variants
<ToggleButton variant="flat" isSelected={isEnabled} onChange={setIsEnabled}>
  Enable Notifications
</ToggleButton>

// Toggle button with icon and state
<ToggleButton variant="outline" isSelected={isFavorite} onChange={setIsFavorite}>
  <Icon><Heart /></Icon>
  {isFavorite ? 'Favorite' : 'Add to Favorites'}
</ToggleButton>

// Icon-only toggle button
<ToggleButton variant="icon" isSelected={isBookmarked} onChange={setIsBookmarked}>
  <Icon><Bookmark /></Icon>
</ToggleButton>

// Toggle button with different colors and sizes
<ToggleButton color="critical" size="small" isSelected={isEnabled}>
  Critical Toggle
</ToggleButton>