Button

Playground

Change the props and watch the component and its code update live.

Props

Label

Variant

Size

Primary color

Start icon

End icon

Loading

Disabled

Hold to confirm

Split with menu

Code

import { Rocket } from "lucide-react";
import { Button } from "@/components/ui/button";

<Button
  startIcon={<Rocket />}
>
  Deploy
</Button>

Terminal

npx @bloxa/cli add button
# or: npx shadcn@latest add @bloxa/button

Install separately: hold-button

Terminal

npx shadcn@latest add @bloxa/hold-button

Packages installed automatically: radix-ui, class-variance-authority

Five visual styles; use primary for the main action.

startIcon / endIcon, or icon only. Give icon-only buttons an aria-label.

Width stays fixed and the button is disabled. Click the first button to try it.

Main action plus a dropdown; menus can have submenus.

For risky actions. Releasing early cancels.

Press and hold for 1.2 seconds.

Use asChild to apply button styles to an <a> tag.

Every component also accepts the props of the element it renders.

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive"	"primary"	Visual style.
size	"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"	"md"	Size; icon sizes are square.
startIcon	ReactNode	—	Icon before the label.
endIcon	ReactNode	—	Icon after the label.
loading	boolean	false	Shows a spinner, keeps the width and disables the button.
asChild	boolean	false	Applies the styles to the child element (e.g. <a>).

Joins buttons into one segment.

Installed separately with @bloxa/hold-button.

Prop	Type	Default	Description
onConfirm	() => void	—	Runs when the hold completes.
duration	number	1200	Hold duration in milliseconds.
variant	ButtonProps["variant"]	"destructive"	Button style.
size	ButtonProps["size"]	"md"	Button size.