Legacy Bar Button

Why Use It

Best for navigation bars, action rows, and other tight spaces where a full button component feels too heavy.
Supports text, icon, text-icon, and backward layouts from one API.
Includes default, accent, and destructive gradients so you can keep hierarchy without swapping components.
Works well as a shared action primitive inside toolbars, install surfaces, and inline app controls.

Installation

Install the standalone button when you want the navigation chrome without pulling in larger composed controls.

$ bunx --bun shadcn@latest add https://sabraman.ru/r/legacy-bar-button.json

Quick Start

The mixed layout example is the fastest way to see how text, icon, and accent variants fit together.

"use client";

import { DownloadIcon, ExternalLink, PlusIcon } from "lucide-react";

import { LegacyBarButton } from "@/components/legacy-bar-button";

export function LegacyBarButtonUsageExample() {
	return (
		<div className="flex flex-wrap items-center gap-3">
			<LegacyBarButton label="Library" layout="backward" />
			<LegacyBarButton icon={<PlusIcon />} layout="icon" />
			<LegacyBarButton
				icon={<DownloadIcon />}
				label="Install"
				layout="text-icon"
			/>
			<LegacyBarButton
				label="Docs"
				trailingIcon={<ExternalLink />}
				variant="accent"
			/>
			<LegacyBarButton label="Remove" variant="destructive" />
		</div>
	);
}

Examples

Mixed Layouts

Mix backward, icon, text-icon, accent, and destructive buttons in one action row.

"use client";

import { DownloadIcon, ExternalLink, PlusIcon } from "lucide-react";

import { LegacyBarButton } from "@/components/legacy-bar-button";

export function LegacyBarButtonUsageExample() {
	return (
		<div className="flex flex-wrap items-center gap-3">
			<LegacyBarButton label="Library" layout="backward" />
			<LegacyBarButton icon={<PlusIcon />} layout="icon" />
			<LegacyBarButton
				icon={<DownloadIcon />}
				label="Install"
				layout="text-icon"
			/>
			<LegacyBarButton
				label="Docs"
				trailingIcon={<ExternalLink />}
				variant="accent"
			/>
			<LegacyBarButton label="Remove" variant="destructive" />
		</div>
	);
}

Toolbar Navigation

Use the backward layout and compact icon buttons inside a faux navigation bar.

"use client";

import { CopyIcon } from "lucide-react";

import { LegacyBarButton } from "@/components/legacy-bar-button";

const TOOLBAR_BACKGROUND =
	"linear-gradient(180deg, rgba(201,214,231,0.98) 0%, rgba(158,180,208,0.96) 40%, rgba(112,142,186,0.96) 100%)";

export function LegacyBarButtonToolbarExample() {
	return (
		<div className="w-full max-w-[760px]">
			<div
				className="relative overflow-hidden rounded-[18px] px-[8px] pt-[10px] pb-[9px] shadow-[0_16px_30px_rgba(0,0,0,0.26)]"
				style={{ backgroundImage: TOOLBAR_BACKGROUND }}
			>
				<div
					aria-hidden="true"
					className="pointer-events-none absolute inset-0 rounded-[inherit] shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.48),inset_0px_2px_0px_0px_rgba(255,255,255,0.18),inset_0px_-1px_0px_0px_rgba(63,86,121,0.28)]"
				/>

				<div className="relative flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
					<div className="flex shrink-0 items-center">
						<LegacyBarButton label="Components" layout="backward" />
					</div>

					<div className="flex flex-wrap items-center justify-end gap-2">
						<LegacyBarButton
							icon={<CopyIcon />}
							label="Copy Page"
							layout="text-icon"
						/>

						<LegacyBarButton
							aria-label="Share page"
							icon={
								<ToolbarAssetIcon
									height={18}
									src="/figma/legacy-safari/page-share.svg"
									width={23}
								/>
							}
							layout="icon"
						/>

						<LegacyBarButton
							aria-label="Previous component"
							icon={
								<ToolbarAssetIcon
									height={15}
									src="/figma/legacy-safari/page-back.svg"
									width={12}
								/>
							}
							layout="icon"
						/>

						<LegacyBarButton
							aria-label="Next component"
							disabled={true}
							icon={
								<ToolbarAssetIcon
									height={15}
									src="/figma/legacy-safari/page-forward.svg"
									width={12}
								/>
							}
							layout="icon"
						/>
					</div>
				</div>
			</div>
		</div>
	);
}

function ToolbarAssetIcon({
	height,
	src,
	width,
}: {
	height: number;
	src: string;
	width: number;
}) {
	return (
		<span
			aria-hidden="true"
			className="inline-block bg-center bg-no-repeat"
			style={{
				backgroundImage: `url(${src})`,
				backgroundSize: "contain",
				height,
				width,
			}}
		/>
	);
}

Accent Actions

Accent variants work well for confirm, share, or route-style actions.

"use client";

import { MapPinnedIcon, Share2Icon, SparklesIcon } from "lucide-react";
import { LegacyBarButton } from "@/components/legacy-bar-button";

export function LegacyBarButtonAccentExample() {
	return (
		<div className="flex flex-wrap items-center gap-3">
			<LegacyBarButton
				icon={<SparklesIcon />}
				label="Apply"
				layout="text-icon"
				variant="accent"
			/>
			<LegacyBarButton
				icon={<Share2Icon />}
				label="Share"
				layout="text-icon"
				variant="accent"
			/>
			<LegacyBarButton
				icon={<MapPinnedIcon />}
				label="Route"
				layout="text-icon"
				variant="accent"
			/>
		</div>
	);
}

Destructive Actions

Destructive variants keep compact controls visually separate from neutral actions.

"use client";

import { RotateCcwIcon, Trash2Icon, XIcon } from "lucide-react";
import { LegacyBarButton } from "@/components/legacy-bar-button";

export function LegacyBarButtonDestructiveExample() {
	return (
		<div className="flex flex-wrap items-center gap-3">
			<LegacyBarButton label="Stop Sync" variant="destructive" />
			<LegacyBarButton
				icon={<RotateCcwIcon />}
				label="Reset"
				layout="text-icon"
				variant="destructive"
			/>
			<LegacyBarButton
				icon={<Trash2Icon />}
				label="Delete"
				layout="text-icon"
				variant="destructive"
			/>
			<LegacyBarButton icon={<XIcon />} layout="icon" variant="destructive" />
		</div>
	);
}

API Reference

LegacyBarButtonProps covers the layout, icon, label, trailing icon, and visual variant. Most consumers only need to choose the layout and pass the icon content they want to render.

Also inherits: React.ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Required
`icon`	`React.ReactNode`	No
`label`	`string`	No
`layout`	`LegacyBarButtonLayout`	No
`trailingIcon`	`React.ReactNode`	No
`variant`	`LegacyBarButtonVariant`	No

Notes

Leave layout undefined if you want the component to infer the correct mode from label, icon, and trailingIcon.
Use backward for navigation affordances and text-icon for action buttons that need a stronger label.
Accent and destructive treatments only change the chrome, so the component keeps the same button semantics and event model.

SABRAMAN