Skip to content

Action Bar

Bottom-anchored, dismissible bulk-action toolbar — the "N items selected" pattern. Data-source agnostic: plugs into DataTable row selection or any other list.

stable client:visible

Rendered example — light + dark

Light

Select one or more rows — a bottom-anchored bar appears with the selection count and bulk actions, dismissible without acting.

  • Invoice #1042
  • Invoice #1043
  • Invoice #1044
  • Invoice #1045

Dark

Select one or more rows — a bottom-anchored bar appears with the selection count and bulk actions, dismissible without acting.

  • Invoice #1042
  • Invoice #1043
  • Invoice #1044
  • Invoice #1045

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

No snippet yet for this component — open the source link above, or read the contribution guide .

Report an issue

Show diagnostics

Environment

 

Console errors

 

Failed requests