Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Toolbar
A container for grouping a set of buttons and controls.
"use client";
import {
AlignCenterIcon,
AlignLeftIcon,
AlignRightIcon,
DollarSignIcon,
PercentIcon,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Select,
SelectItem,
SelectPopup,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Toggle, ToggleGroup } from "@/components/ui/toggle-group";
import {
Toolbar,
ToolbarButton,
ToolbarGroup,
ToolbarSeparator,
} from "@/components/ui/toolbar";
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
const items = [
{ label: "Helvetica", value: "helvetica" },
{ label: "Arial", value: "arial" },
{ label: "Times New Roman", value: "times-new-roman" },
];
export default function Particle() {
return (
<TooltipProvider>
<Toolbar>
<ToggleGroup className="border-none p-0" defaultValue={["left"]}>
<Tooltip>
<TooltipTrigger
render={
<ToolbarButton
aria-label="Align left"
render={<Toggle value="left" />}
>
<AlignLeftIcon />
</ToolbarButton>
}
/>
<TooltipPopup sideOffset={8}>Align left</TooltipPopup>
</Tooltip>
<Tooltip>
<TooltipTrigger
render={
<ToolbarButton
aria-label="Align center"
render={<Toggle aria-label="Toggle center" value="center" />}
>
<AlignCenterIcon />
</ToolbarButton>
}
/>
<TooltipPopup sideOffset={8}>Align center</TooltipPopup>
</Tooltip>
<Tooltip>
<TooltipTrigger
render={
<ToolbarButton
aria-label="Align right"
render={<Toggle aria-label="Toggle right" value="right" />}
>
<AlignRightIcon />
</ToolbarButton>
}
/>
<TooltipPopup sideOffset={8}>Align right</TooltipPopup>
</Tooltip>
</ToggleGroup>
<ToolbarSeparator />
<ToolbarGroup>
<Tooltip>
<TooltipTrigger
render={
<ToolbarButton
aria-label="Format as currency"
render={<Button size="icon" variant="ghost" />}
>
<DollarSignIcon />
</ToolbarButton>
}
/>
<TooltipPopup sideOffset={8}>Format as currency</TooltipPopup>
</Tooltip>
<Tooltip>
<TooltipTrigger
render={
<ToolbarButton
aria-label="Format as percent"
render={<Button size="icon" variant="ghost" />}
>
<PercentIcon />
</ToolbarButton>
}
/>
<TooltipPopup sideOffset={8}>Format as percent</TooltipPopup>
</Tooltip>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarGroup>
<Select defaultValue="helvetica" items={items}>
<Tooltip>
<TooltipTrigger
render={
<ToolbarButton
render={
<SelectTrigger>
<SelectValue />
</SelectTrigger>
}
/>
}
/>
<TooltipPopup sideOffset={8}>
Select a different font
</TooltipPopup>
</Tooltip>
<SelectPopup>
{items.map(({ label, value }) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
))}
</SelectPopup>
</Select>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarGroup>
<ToolbarButton render={<Button />}>Save</ToolbarButton>
</ToolbarGroup>
</Toolbar>
</TooltipProvider>
);
}
Installation
pnpm dlx shadcn@latest add @coss/toolbar
Usage
import { Button } from "@/registry/default/ui/button"
import { Toggle } from "@/registry/default/ui/toggle"
import {
Toolbar,
ToolbarButton,
ToolbarGroup,
ToolbarSeparator,
} from "@/registry/default/ui/toolbar"<Toolbar>
<ToolbarGroup>
<ToolbarButton render={<Toggle />}>Bold</ToolbarButton>
<ToolbarButton render={<Toggle />}>Underline</ToolbarButton>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarButton render={<Button />}>Save</ToolbarButton>
</Toolbar>API Reference
Toolbar
Root component. Styled wrapper for Toolbar.Root from Base UI with flex layout.
ToolbarGroup
Groups related toolbar items. Styled wrapper for Toolbar.Group from Base UI.
ToolbarButton
Button within the toolbar. Alias for Toolbar.Button from Base UI. Use with render prop to render as Toggle or Button.
ToolbarSeparator
Visual separator between toolbar items. Styled wrapper for Toolbar.Separator from Base UI.
ToolbarLink
Link within the toolbar. Alias for Toolbar.Link from Base UI.