Components

Disclosure Toggle

The ▸ triangle of toggle blocks and tree rows: rotates down when open.

Meeting notes
Nested content shows when the toggle is open.

Usage

Use it to:

  • collapse nested content in trees and toggle blocks

Don’t use it to:

  • whole collapsible sections with a header (use Accordion)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/DisclosureToggleExample.tsx
import { useState } from 'react';
import { DisclosureToggle } from '@krackedui/motion';

export function ToggleBlock() {
  const [open, setOpen] = useState(true);
  return (
    <>
      <div className="flex items-center gap-0.5">
        <DisclosureToggle open={open} onOpenChange={setOpen} aria-controls="notes" />
        <span>Meeting notes</span>
      </div>
      {open && <div id="notes">Nested content</div>}
    </>
  );
}

Examples

Size

Dark theme

API Reference

DisclosureToggle

A <button>; supports all of its props. Adds:

PropTypeDefault
open
boolean
false
onOpenChange
(open: boolean) => void
size
"sm""md"
"md"

Accessibility

  • A button with aria-expanded and the name “Open” / “Close”; Enter / Space toggle it. Point aria-controls at the content it shows.
  • 24×24 on touch screens.
© 2026 Motion. Internal documentation.