Binhlaig UI Component

Button

Buttons allow users to perform actions and make choices with a single click or tap.

Installation

Add the Button component to your project using the Binhlaig UI CLI.

Terminal

npx binhlaig-ui@latest add button

Import the Button component from your UI components directory.

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

Use the default button for primary actions in your application.

Use different visual styles to represent action priority and meaning.

Buttons are available in small, medium and large sizes.

Add icons before or after button labels to make actions easier to understand.

Icon-only buttons are useful for compact toolbars and repeated actions.

Disable the button and show a spinner while an action is processing.

Set the button width to fill its parent container.

Disabled buttons prevent interaction and appear with reduced opacity.

Properties available on the Binhlaig UI Button component.

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"`	`"primary"`	Controls the visual style of the button.
`size`	`"sm" \| "md" \| "lg" \| "icon"`	`"md"`	Controls the height and padding.
`disabled`	`boolean`	`false`	Prevents users from interacting with the button.
`className`	`string`	`—`	Adds custom Tailwind CSS classes.
`children`	`React.ReactNode`	`—`	Content rendered inside the button.