Components

Toolbar

Search input + optional leading filter actions + trailing table-level action buttons.

View in Figma
<Toolbar searchPlaceholder="Search rooms…">
  <IconButton
    icon={faDownload}
    type="ghost"
    size="sm"
    aria-label="Export"
  />
  <IconButton
    icon={faTableColumns}
    type="ghost"
    size="sm"
    aria-label="Columns"
  />
</Toolbar>
<Toolbar
  searchPlaceholder="Search requests…"
  leadingActions={
    <>
      <Button
        variant="outline"
        size="sm"
        icon={faFilter}
      >
        Filter
      </Button>
      <Button variant="outline" size="sm">
        Priority
      </Button>
    </>
  }
>
  <IconButton
    icon={faDownload}
    type="ghost"
    size="sm"
    aria-label="Export"
  />
</Toolbar>
Props
searchPlaceholder:string= "Search..."
Placeholder text for the search input.
searchValue:string
Controlled search value.
onSearchChange:(value: string) => void
Called when the search value changes.
leadingActions:ReactNode
Renders immediately after search — typically outline buttons.
children:ReactNode
Trailing actions slot — pushed to the far right.
Tokens