NAMCHE UI

Toggle

A two-state button that can be pressed or unpressed, for standalone options like pinning or auto-refresh.

Install

pnpm dlx shadcn@latest add @namche/toggle

Usage

import { PinIcon } from 'lucide-react';
import { Toggle } from '@/components/ui/toggle';

<Toggle aria-label="Pin dashboard" defaultPressed>
  <PinIcon />
  Pin dashboard
</Toggle>

Wraps Base UI's Toggle, taking pressed / defaultPressed and onPressedChange. variant is default | outline, size is default | sm | lg. Always pass an aria-label (or visible text, as above) since the pressed state alone isn't announced without one.

On this page