Secondary, outline and destructive buttons with soft status buttons and animated icons, popping in as one group.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/icon-buttons
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { Plus, Send, Rocket } from "lucide-react";4import { IconButtons } from "@/components/nextui/icon-buttons";56export function Toolbar() {7return (8<IconButtons9actions={[10{ label: "New task", icon: Plus, variant: "secondary", onClick: () => console.log("new") },11{ label: "Send", icon: Send, iconPosition: "end", variant: "outline" },12]}13statuses={[14{ label: "Queued", icon: "clock", tone: "bg-violet-500/10 text-violet-600 hover:bg-violet-500/15 dark:text-violet-400" },15{ label: "Shipping", icon: Rocket, tone: "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/15 dark:text-emerald-400" },16]}17onStatusClick={(status) => console.log(status.label)}18/>19);20}
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | ActionButtonItem[] | Export, Continue, Delete | Plain buttons shown first: label, icon, iconPosition, variant, onClick |
| statuses | StatusButtonItem[] | 8 sample statuses | Tinted buttons: label, tone classes and a Lucide icon or "clock" | "progress" | "timer" |
| onStatusClick | (status: StatusButtonItem) => void | – | Called with the status button that was clicked |
| className | string | – | Extra classes on the wrapper |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.