RetroBevelButton
A Mac OS 9 Appearance Manager bevel button: square-ish, icon above or beside the label, three bevel depths, sticky toggle behaviour and an optional pop-up menu arrow.
Installation
npx shadcn@latest add "https://nostalgia-ui.com/r/retro-bevel-button.json"
Setup: installing any component also installs nostalgia-theme (the --os9-* tokens and os9-* utilities) via registryDependencies. To add the theme on its own: npx shadcn@latest add https://nostalgia-ui.com/r/nostalgia-theme.json
Import
import { RetroBevelButton } from "@/components/ui/retro-bevel-button"Usage
<RetroBevelButton icon={<RetroIconFolder size="default" />} iconPosition="top">
Folders
</RetroBevelButton>
// Sticky toggle
<RetroBevelButton defaultPressed>Bold</RetroBevelButton>
<RetroBevelButton pressed={on} onPressedChange={setOn}>Bold</RetroBevelButton>
// Pop-up bevel button (pair with RetroDropdownMenuTrigger asChild)
<RetroBevelButton menu>View</RetroBevelButton>Bevel Depths
Icon Above Label
Icon Beside Label & Icon Only
Toggle (Sticky) Behaviour
Pop-up Menu Indicator
Press and hold to see the inverted bevel. Toggle buttons stay pressed (aria-pressed) until clicked again.