Button
Square-bordered action button with signal variants.
Source
"use client"
import { Button } from "@/registry/warren/button/button"
export default function ButtonDemo() {
return (
<div className="flex flex-wrap items-center gap-3">
<Button variant="primary">RUN</Button>
<Button variant="outline">HOLD</Button>
<Button variant="danger">ABORT</Button>
</div>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/button.jsonUsage
import { Button } from "@/components/ui/button"<Button variant="primary" onClick={run}>
RUN
</Button>Buttons render as real <button> elements and accept every standard button prop, including
type, onClick, and disabled. Disabled buttons drop to 50% opacity and ignore pointer events.
Variants
default · primary · success · danger · warning · outline · ghost
Signal variants follow the same token discipline as the other primitives: the text grade
(*-text / *-foreground) carries the label, while the saturated tone fills the border.
On hover every tone variant flattens to the neutral muted well (flat, no brightness shift)
while the resting text-grade label stays put — so the filled primary chip drops to muted
with its primary-text label. ghost drops the border entirely, outline keeps it without
the panel fill.
Source
"use client"
import { Button } from "@/registry/warren/button/button"
export default function ButtonVariants() {
return (
<div className="flex flex-wrap items-center gap-3">
<Button variant="default">DEFAULT</Button>
<Button variant="primary">PRIMARY</Button>
<Button variant="success">SUCCESS</Button>
<Button variant="danger">DANGER</Button>
<Button variant="warning">WARNING</Button>
<Button variant="outline">OUTLINE</Button>
<Button variant="ghost">GHOST</Button>
</div>
)
}
Sizes
sm · md · lg · icon
Mono uppercase labels scale from 10px at sm up to text-sm at lg. icon is a fixed
8×8 cell for a single glyph, with no padding.
Source
"use client"
import { Button } from "@/registry/warren/button/button"
export default function ButtonSizes() {
return (
<div className="flex flex-wrap items-center gap-3">
<Button variant="primary" size="sm">
SM
</Button>
<Button variant="primary" size="md">
MD
</Button>
<Button variant="primary" size="lg">
LG
</Button>
<Button variant="primary" size="icon">
→
</Button>
</div>
)
}