TrashToggle

Toggle button for switching between active and trashed items view

Overview

TrashToggle provides a standardized button for switching between viewing active items and trashed items in list views. It displays a badge with the count of trashed items and includes tooltip feedback.

Key Features

Visual toggle state with secondary variant when active
Badge showing count of trashed items (when not active)
Tooltip showing current action (View Active/View Trash)
Accessible with proper aria-pressed and aria-label attributes

Examples

Basic Usage

Click to toggle between active and trashed views.

Viewing active items

With Trash Count

Shows a badge when there are items in trash and not currently viewing trash.

7 items in trash

States

Inactive (View Active)

Active (View Trash)

With Badge

Disabled

In Toolbar Context

TrashToggle is typically used alongside search and filter controls in list toolbars.

Props Reference

Prop	Type	Default	Description
`isActive`	`boolean`	`-`	Whether currently viewing trashed items
`onToggle`	`() => void`	`-`	Callback when toggle is clicked
`count`	`number`	`0`	Number of items in trash (shows badge if > 0 and not active)
`className`	`string`	`-`	Additional CSS classes
`disabled`	`boolean`	`false`	Disable the toggle

Usage

import { TrashToggle } from '@/ui/components';
import { useState } from 'react';

const [showTrash, setShowTrash] = useState(false);
const trashedCount = 5;

// Basic usage
<TrashToggle
  isActive={showTrash}
  onToggle={() => setShowTrash(!showTrash)}
  count={trashedCount}
/>

// In a toolbar
<div className="flex items-center gap-2">
  <SearchInput
    value={search}
    onChange={setSearch}
    placeholder="Search items..."
  />
  <Button variant="outline" size="icon">
    <Icon icon={faFilter} />
  </Button>
  <TrashToggle
    isActive={showTrash}
    onToggle={() => setShowTrash(!showTrash)}
    count={trashedCount}
  />
</div>

// Disabled state
<TrashToggle
  isActive={false}
  onToggle={() => {}}
  count={0}
  disabled
/>