Button

shadcn-style button with six variants, a tactile press, icon slots and a loading spinner that slides the label aside.

children

variant

size

disabled

Installation

npx shadcn@latest add @glint-ui/button

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/button.json

Usage

import { Button } from "@/components/ui/button";

<Button variant="default" startIcon={<Rocket />} loading={saving}>Deploy now</Button>

<Button variant="outline" render={(p) => <Link href="/docs" {...p} />}>Read docs</Button>

Props

Prop	Type	Default	Description
children	string	"Deploy now"	Label.
variant	"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"	"default"	Visual style.
size	"sm" \| "md" \| "lg" \| "icon"	"md"	Height and padding.
loading	boolean	false	Spinner, aria-busy and disabled.
disabled	boolean	false	Disable the button.
startIcon	ReactNode	—	Icon before the label.
endIcon	ReactNode	—	Icon after the label.
render	ReactNode	—	Render another element, e.g. (p) => <Link href="/" {...p} />.
className	string	—	Extra classes for the root element.