Button

Displays a button or a component that looks like a button.

tsx

1
2
3<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>

Button — le bouton shadcn universel. 6 variants (default, secondary, destructive, outline, ghost, link) × 4 sizes (default, sm, lg, icon). Peut rendre <button> ou <a> selon la présence de href.

Base des DropdownMenuTrigger, DialogTrigger, PopoverTrigger, AlertDialogAction… bref, la fondation de la moitié du kit.

Installation

Terminal

$ bext ui add button

Usage

tsx

1
2
3
4
5
6
7
8import { Button } from "@bext-stack/ui/primitives"

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline" size="sm">Small outline</Button>
<Button variant="destructive">Delete</Button>
<Button href="/docs" target="_blank">External link</Button>
<Button loading>Saving...</Button>

Anatomy

<Button variant="default|secondary|destructive|outline|ghost|link" size="default|sm|lg|icon" href?>
  ├── {loading ? <Spinner /> : icon && <Icon />}
  └── {children}

API Reference

Button

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"	"default"	Style visuel du bouton.
size	"default" \| "sm" \| "lg" \| "icon"	"default"	Taille : sm=h-8, default=h-9, lg=h-10, icon=h-9 w-9 square.
href	string	—	Si présent, rend un au lieu de
target	string	—	Ex "_blank" pour ouvrir dans un nouveau tab.
type	"button" \| "submit" \| "reset"	"button"	Type HTML pour les vrais boutons (dans un form).
icon	string	—	Slug lucide-like pour ajouter une icône à gauche du label.
loading	boolean	—	Affiche un spinner à la place de l'icône. Désactive le bouton (aria-busy).
disabled	boolean	—	Standard HTML.

Keyboard

Key	Action
`Enter / Space`	Active le bouton (comportement natif).
`Tab`	Focus / défocus.

Accessibility

Toujours mettre un texte explicite ou un aria-label quand le bouton n'a qu'une icône (size="icon"). Sinon les AT annoncent "bouton" sans contexte.

loading=true ajoute aria-busy="true" et désactive le bouton.

Examples

Sizes (sm / default / lg / icon)

tsx

1
2
3
4<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><PlusIcon /></Button>

Loading state

tsx

<Button loading>Saving...</Button>

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A normal PRISM server page embeds a signals island. The island is
// rendered to HTML on the server, then hydrated — only the click count
// text node updates, nothing re-renders.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Button</h1>
      <p style="color:#64748b;margin-top:0">Variants + a signal-backed click counter (fine-grained, no re-render).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// The page is server-rendered; <Showcase> carries a "use client"
// directive, so its click handlers ship to the browser and hydrate.
// Edit the variants on the left and watch the preview update.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Button</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>Variants, sizes, and a live click handler — all editable.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Breadcrumb Calendar →

On This Page