ui/components/button

Button

Terminal-inspired button with bracket notation and 7 variants.

Preview

tsx

1 import { Button } from "@/components/ui/button";2 3 export default function ButtonDefault() {4   return (5     <div className="flex items-center gap-3">6       <Button variant="primary">Submit</Button>7       <Button variant="ghost">Cancel</Button>8       <Button bracket>Submit</Button>9     </div>10   );11 }12

Installation

$pnpm exec dgadd add ui/button

[Installs to]src/components/ui/button[Item]ui/button

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Button } from "@/components/ui/button";2 3 export default function ButtonDefault() {4   return (5     <div className="flex items-center gap-3">6       <Button variant="primary">Submit</Button>7       <Button variant="ghost">Cancel</Button>8       <Button bracket>Submit</Button>9     </div>10   );11 }12

Examples

Variants

Preview

tsx

1 import { Button } from "@/components/ui/button";2 3 export default function ButtonVariants() {4   return (5     <div className="flex flex-wrap gap-3">6       <Button variant="primary">Primary</Button>7       <Button variant="secondary">Secondary</Button>8       <Button variant="ghost">Ghost</Button>9       <Button variant="outline">Outline</Button>10       <Button variant="success">Success</Button>11       <Button variant="destructive">Destructive</Button>12       <Button variant="link">Link</Button>13       <Button bracket>Bracket</Button>14     </div>15   );16 }17

States

Preview

tsx

1 import { Button } from "@/components/ui/button";2 3 export default function ButtonStates() {4   return (5     <div className="space-y-4">6       <div className="flex items-center gap-3">7         <Button size="sm">Small</Button>8         <Button size="md">Medium</Button>9         <Button size="lg">Large</Button>10       </div>11       <div className="flex items-center gap-3">12         <Button loading>Loading</Button>13         <Button bracket loading>14           Loading15         </Button>16         <Button disabled>Disabled</Button>17       </div>18     </div>19   );20 }21

Highlighted (collection focus)

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import { Button } from "@/components/ui/button";5 6 const actions = ["Review", "Rerun", "Discard"] as const;7 8 /**9  * A parent collection owns keyboard focus and marks the active button with10  * `highlighted`, which paints the same outside ring as real focus.11  */12 export default function ButtonHighlighted() {13   const [index, setIndex] = useState(1);14 15   return (16     <div className="flex flex-wrap items-center gap-3">17       {actions.map((label, position) => (18         <Button19           key={label}20           variant="outline"21           highlighted={position === index}22           onFocus={() => setIndex(position)}23         >24           {label}25         </Button>26       ))}27     </div>28   );29 }30

Link (as anchor)

Preview

tsx

1 import { Button } from "@/components/ui/button";2 3 export default function ButtonLink() {4   return (5     <div className="flex flex-wrap gap-3">6       <Button as="a" href="/about" variant="link">7         Link8       </Button>9       <Button as="a" href="/docs" variant="ghost">10         Ghost Link11       </Button>12       <Button as="a" href="/changelog" variant="secondary" size="sm">13         Small Link14       </Button>15     </div>16   );17 }18

Render-Prop

Preview

tsx

1 "use client";2 3 import { Button } from "@/components/ui/button";4 5 export default function ButtonRenderProp() {6   return (7     <div className="flex flex-wrap gap-3">8       <Button<HTMLAnchorElement> variant="link">9         {({ ref, disabled: _disabled, onClick, ...props }) => (10           <a ref={ref} href="/docs" onClick={onClick} {...props}>11             Render-prop link12           </a>13         )}14       </Button>15       <Button<HTMLAnchorElement> variant="secondary" disabled>16         {({ ref, disabled: _disabled, onClick, ...props }) => (17           <a ref={ref} href="/docs" onClick={onClick} {...props}>18             Disabled link19           </a>20         )}21       </Button>22       <Button<HTMLAnchorElement> variant="ghost" loading>23         {({ ref, disabled: _disabled, onClick, ...props }) => (24           <a ref={ref} href="/docs" onClick={onClick} {...props}>25             Loading link26           </a>27         )}28       </Button>29     </div>30   );31 }32

API Reference

Button

Name	Type	Default	Description
variant	"primary" \| "secondary" \| "destructive" \| "success" \| "ghost" \| "outline" \| "link"	"primary"	Visual style of the button.
size	"sm" \| "md" \| "lg" \| "icon"	"md"	Size token applied to height, padding, and font size.
bracket	boolean	false	Wraps the button label in [ ] characters for terminal-style emphasis. Switches to [ ... ] when loading is true.
loading	boolean	false	Shows a Spinner in place of the label and disables click activation.
disabled	boolean	false	Disables interaction; sets aria-disabled and stops onClick.
highlighted	boolean	false	Marks the button as currently highlighted by a parent collection (data-highlighted attribute).
as	"button" \| "a"	"button"	Render as a native <button> or as an <a> for navigation. The "link" variant is purely visual; combine it with as="a" for a semantic link.
childrenrequired	ReactNode \| (renderProps: ButtonRenderProps) => ReactNode	—	Button label, or a render function that receives computed props including the disabled/loading activation guard.

Data attributes

Attribute	Applies to	Values	Description
data-highlighted	Button in button, anchor, and render-prop modes	present when highlighted	Marks the button as highlighted by a parent collection.

Accessibility

Notes

One Filled Voice

Only the primary variant is filled, and it paints the --action / --action-foreground pair. Semantic intents stay outlined — success and destructive carry meaning through colour, priority through fill — so the variant set keeps one filled voice per screen while success and destructive stay recognisable by hue alone.

--action, not --primary

The filled variant paints --action / --action-foreground, the call-to-action pair, and not --primary. They are different roles that happen to coincide in dark: --primary is monochrome emphasis (filled progress, completed steps, checked indicators) and stays mono in both themes; --action is the one place per screen a theme is allowed to spend chroma, so the light palette resolves it to the accent violet while dark keeps it white. A button that reads --primary would lose that distinction in light and turn every filled control into a call to action.

Disabled Primary

Disabled and loading primaries drop the --action fill for a half-strength solid --border edge and a --muted-foreground label rather than fading it. Fading a filled button drags its label toward the page background with it and the pair falls under 4.5:1; emptying the fill leaves the label on the ambient surface, where it keeps its own contrast in both themes, and the retained edge keeps the button's shape readable. No control in the system draws a dashed or dotted edge.

Coarse-Pointer Hit Area

On pointer:coarse the sm, md, and icon sizes extend a transparent ::before to a 44x44 effective target instead of growing: buttons live in fixed-height toolbars and panel headers where a real min-height would reflow the row. lg is already 44px tall and is left alone. Those three sizes therefore carry position:relative so the size itself is the pseudo-element's containing block — do not rely on Button being relatively positioned at lg. Two preconditions belong to the call site: no overflow-hidden ancestor between the button and the scroll root (it clips the overhang and the target silently shrinks back), and a minimum vertical gap to the next interactive row — 16px for sm, 8px for md and icon — otherwise stacked hit areas overlap and taps land on the wrong control. The extension is vertical only, so horizontal neighbours in a button row are safe; icon additionally widens by 4px per side to reach 44px across.

Bracket Mode

The bracket prop wraps the button label in [ ] characters, mimicking terminal UI conventions. When loading is true, bracket mode shows [ ... ] instead of [...].

Polymorphic Element

Use as="a" to render a semantic anchor element for navigation. The link variant is purely visual — combine it with as="a" for semantic anchor navigation.

Render-Prop Composition

Pass a function as children to control the rendered element. Button provides computed props, including an onClick activation guard. Spread them onto the rendered host so disabled and loading states prevent navigation for anchors and framework links.

Source

Install via CLI: pnpm exec dgadd add ui/button.

Highlighted source loads after this disclosure opens. Browse the source repository.

Button

Installation

Usage

Examples

Variants

States

Highlighted (collection focus)

Link (as anchor)

Render-Prop

API Reference

Button

Data attributes

Accessibility

Notes

One Filled Voice

--action, not --primary

Disabled Primary

Coarse-Pointer Hit Area

Bracket Mode

Polymorphic Element

Render-Prop Composition

Source

View component source (12 files)