Toolbar
Filter, Suche und Anzeigeoptionen in einer 48px-Zeile, mit Pfeiltasten-Fokus über alle.
Status
Model
function Logs() {
const display = useLogDisplayOptions();
return (
<div className="w-full rounded-well shadow-frame">
<Toolbar aria-label="Filters">
<FilterChip property="Status" operator="is" value="2xx" onRemove={() => undefined} />
<FilterChip property="Model" operator="is" value="gpt-5" onRemove={() => undefined} />
<Button variant="ghost" size="sm" leadingIcon={icons.add}>
Add filter
</Button>
<Toolbar.Spacer />
<div className="w-240">
<SearchInput aria-label="Search logs" placeholder="Search logs" />
</div>
<DisplayOptions {...display} />
</Toolbar>
</div>
);
}import { Toolbar } from "@logicplanes/kaeso-ui";Props
aria-labelstringLegt einen String fest, der das aktuelle Element benennt.
size"md" | "inset"Die Höhe der Leiste: der Standard oder eingerückt in einem Panel.