Search

The Search bar provides a composable filter and search toolbar.

Usage

Use .Search as a container holding .Search-Field, button groups, and tag filters.

<div class="Search">
  <div class="Search-Field">
    <input type="search" class="Input" placeholder="Search…" />
  </div>
  <div class="Search-Group">
    <button class="Button neutral">All</button>
    <button class="Button neutral is-active">Active</button>
  </div>
  <div class="Search-Divider"></div>
  <div class="Search-Group">
    <span class="Tag primary">Filter</span>
  </div>
  <div class="Search-Spacer"></div>
  <button class="Button primary">Search</button>
</div>

Variants

• .flush: Transparent, borderless background — useful inside card headers.
• .stacked: Forces a column layout, typically used on mobile.

<div class="Search flush">…</div>

Responsive

On small screens (below 480px), .Search automatically switches to a stacked column layout regardless of variant.

Structure

• .Search-Field: Container for the primary search input, grows to fill available space.
• .Search-Group: Groups related buttons or tags together inline.
• .Search-Divider: Vertical separator between groups.
• .Search-Spacer: Flexible space to push subsequent items to the right.