Composed
Selection toolbar
A floating bar of actions that exists only while something is selected.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/selection-toolbar.jsonIt appears because of the selection
And it disappears when there is none, so it never occupies space it has no use for. Reserving a permanently-visible strip of disabled buttons is the alternative, and it makes every screen a little worse for a case that is usually not happening.
Say what it acts on
count renders as "n selected", so the bar states its scope. A toolbar of verbs
with no object leaves you counting rows to check what Delete will take.
The leading slot is for the single most-used action, separated from the labelled ones by a hairline.
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | — | Rendered as "n selected". |
| actions | { label, icon?, onClick }[] | — | The labelled actions. |
| leading | ReactNode | — | One icon-only action before the divider. |
| onClear | () => void | — | Adds the dismiss affordance. Selection needs an exit. |