Binhlaig UI Component

Button

Accessible action buttons with variants, sizes, icons, loading states and full-width support.

Installation

Initialize Binhlaig UI once, then install Button with Native Beta or Shadcn Stable.

Initialize your project first

Native initialization creates binhlaig.json, lib/utils.ts, the UI directory, required CSS and dependencies.

Terminal

npx --yes binhlaig-ui@latest init

Recommended native installer

Terminal

npx binhlaig-ui@latest add button

Import Button from your project UI directory.

TypeScript

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

Use the default button for a primary action.

Choose a visual style that matches action priority and meaning.

Use small, medium, large and extra-large button sizes.

Control the corner radius independently from size.

Place an icon before or after the label.

Use accessible labels for compact icon-only actions.

Disable interaction and show progress while an action runs.

Fill the available width of the parent container.

Prevent interaction and communicate unavailable actions.

Replace an existing local Button file with the latest registry version.

Back up custom changes first

The overwrite option replaces your current component source file.

Terminal

npx binhlaig-ui@latest add button --overwrite

Properties available on the Binhlaig UI Button component.

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "danger" \| "destructive" \| "success" \| "warning" \| "link"`	`"default"`	Controls the visual style.
`size`	`"sm" \| "md" \| "default" \| "lg" \| "xl" \| "icon" \| "iconSm" \| "iconLg"`	`"md"`	Controls dimensions and typography.
`radius`	`"none" \| "sm" \| "md" \| "lg" \| "full"`	`"lg"`	Controls corner radius.
`fullWidth`	`boolean`	`false`	Fills the parent width.
`loading`	`boolean`	`false`	Shows progress and disables interaction.
`loadingText`	`string`	`—`	Label displayed while loading.
`leftIcon`	`React.ReactNode`	`—`	Icon before the label.
`rightIcon`	`React.ReactNode`	`—`	Icon after the label.
`disabled`	`boolean`	`false`	Prevents interaction.
`className`	`string`	`—`	Adds custom classes.
`children`	`React.ReactNode`	`—`	Content inside the button.