Interactive component documentation showing all elements and states of the document button and dropdown. Use the toggle controls to switch between states.
The primary trigger that replaces the gray "document bar" blob. Shows the current page icon, title, and a chevron indicating dropdown behavior.
Default state: neutral colors, ready for interaction.
The dropdown panel containing search, page list, and footer actions. Supports various loading and error states.
Default state: shows search, page items, and footer actions.
Individual page/template items in the dropdown list. Active item shows a checkmark. Nested items show indent lines.
Default state: plain text items without active selection.
The search field at the top of the dropdown. Filters the page list in real-time. Shows a clear button when text is entered.
Empty state: placeholder text visible, no clear button.