A minimal, zero-runtime, pure HTML/Tailwind button enforcing Monolith principles.
Basic usage of the Monolith Button.
Installation
$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/button.json"
Copy Usage
After you add the component with the CLI, import it from your UI folder:
Copy import { Button, ButtonGroup } from "@/components/ui/button"
export function MyComponent () { return ( < ButtonGroup > < Button variant = "default" >Save</ Button > < Button variant = "outline" >Cancel</ Button > </ ButtonGroup > ); } Examples
Variants
Default Secondary Danger Outline Ghost Link
Group multiple buttons together with seamless borders and protected z-index focus states.
Day Week Month Year
Profile Billing Settings
Icons and sizes
Right Icon
Loading
API Reference
The Button component extends the standard HTML button attributes and adds the following props:
Prop Type Default Description variantenum"default"The visual style (default, danger, ghost, link, outline, secondary). sizeenum"default"The size (default, sm, lg, icon, icon-sm, icon-lg). shapeenum"default"The corner shape (default, pill). isLoadingbooleanfalseDisplays a loading spinner and disables the button while maintaining its original width. asChildbooleanfalseRender as a different element using Radix Slot.
The ButtonGroup component accepts standard div attributes plus:
Prop Type Default Description orientationenum"horizontal"The layout direction (horizontal or vertical).