Button

The foundational interactive element. Composable via asChild, with built-in loading and icon-slot support.

<Button>Save changes</Button>

Editable — change the code above and the preview updates live.

Variants

<div className="ui-flex ui-flex-wrap ui-gap-2">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="danger">Danger</Button>
  <Button variant="link">Link</Button>
</div>

Editable — change the code above and the preview updates live.

Sizes

<div className="ui-flex ui-items-center ui-gap-2">
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</div>

Editable — change the code above and the preview updates live.

Loading state

<Button isLoading>Saving…</Button>

Editable — change the code above and the preview updates live.

Composition with asChild

Renders as the child element instead of a <button>, merging button styles onto it — useful for wrapping a <Link> or <a>.

<Button asChild><a href="#">Read the docs</a></Button>

Editable — change the code above and the preview updates live.

Installation

npm install @labanaat/ui

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

Props

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "danger" \| "link"	"primary"	Visual style
size	"sm" \| "md" \| "lg" \| "icon"	"md"	Size scale
asChild	boolean	false	Render as the child element instead of a button
isLoading	boolean	false	Shows a spinner and disables interaction
startIcon	ReactNode	—	Icon rendered before the label
endIcon	ReactNode	—	Icon rendered after the label