Components

Collection Controls

Composable controls for filtering, configuring, and acting on dense lists and tables.

Filters and views

Keep active constraints visible and place display preferences at the collection edge. Both components are controlled, so saved views can own the same state.

StatusActiveAssigneeMe

tsx

<FilterBar filters={filters} onRemove={removeFilter} onClear={clearFilters} />
<div className="collection-actions">
  <FilterPicker properties={filterProperties} onAddFilter={addFilter} />
  <ViewOptions
    density={density}
    onDensityChange={setDensity}
    columns={columns}
    onColumnVisibilityChange={setColumnVisibility}
  />
</div>

Bulk selection

The toolbar appears only while items are selected. Keep its actions specific to the selected set and always provide a way back to the unselected state.

3 issues selected

tsx

<MultiSelectToolbar
  selectedCount={selectedCount}
  itemLabel="issue"
  onClear={clearSelection}
>
  <Button size="sm" variant="ghost">Archive</Button>
</MultiSelectToolbar>

Row actions

Hover actions reserve no visual attention until the row is hovered or focus moves inside it. Pass visible when a parent row tracks pointer state.

tsx

<HoverActions visible>
  <IconButton label="More actions" size="sm">
    <EllipsisHorizontalIcon />
  </IconButton>
</HoverActions>