Action Bar

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/action-bar.json

Usage

import { ActionBar } from '@/components/matos-ui/action-bar'

<ActionBar
  open={isOpen}
  subject="My Workspace"
  tone="destructive"
  placement="bottomCenter"
  actions={{
    onConfirm: () => {},
    onCancel: () => {},
    isLoading: false
  }}
/>

The bar rises into place from the bottom edge and leaves the same way. Keep it mounted and drive it with open to get both halves — it removes itself from the DOM once the exit has run. Mounting it behind {isOpen && <ActionBar />} still works and still animates in, but the bar is torn out of the tree the moment the condition flips, so there is nothing left to animate out.

Reference

Props

Prop	Type	Default
`open`	`boolean`	`true`
`subject`	`string`	—
`placement`	`"bottomCenter" \| "bottomRight" \| "bottomLeft"`	`"bottomCenter"`
`tone`	`"default" \| "destructive" \| "success" \| "warning" \| "info"`	`"default"`
`size`	`"sm" \| "md"`	`"md"`
`actions`	`{ onConfirm: () => void; onCancel: () => void; isLoading?: boolean }`	—

ActionBar also accepts all props from <div>, minus the native animation and drag handlers that framer-motion redefines on an animated element.