Components · Controls

SearchSearchToggle

A round search button that expands into a field

npx shadcn@latest add @umbra/search-toggle

A 56 magnifier button in the Page action row. On press, a 280 px field slides out to the left (--t-base, --ease-out), focus moves into the field, the magnifier rotates and becomes a cross. The cross and Escape close and clear the search

When to use

  • Searching the page list: meetings, cases

When not to use

  • A form field: Field
  • Search is the screen’s main action: a regular visible Input field

Meetings

7 recordings this week

Team standupTue, 10:00 · 32 min
Designer interviewMon, 16:30 · 48 min
Call with contractorFri, 12:00 · 21 min
Mockup reviewThu, 11:00 · 54 min
Sprint retroWed, 17:00 · 40 min
Meeting with lawyerWed, 12:30 · 25 min
Metrics reviewTue, 15:00 · 36 min

Don’t

  • A field wider than 280 px or search without a close button