Bonsai Design System

InlineAddAction

Dashed border "add new" action card, renders as link or button

Preview

Usage

import { InlineAddAction } from "@/components/ui/inline-add-action"
import { Upload } from "lucide-react"

{/* As a link */}
<InlineAddAction label="Add new tender" href="/tenders/new" />

{/* As a button */}
<InlineAddAction
  label="Upload document"
  icon={<Upload />}
  onClick={() => setDialogOpen(true)}
/>

Renders a dashed-border card with a circular icon and label. Pass href for navigation or onClick for actions. The default icon is a plus sign, but you can override it with the icon prop.

Install

npx shadcn add @bonsai/inline-add-action

On this page