Button · @behivetech · Behive Tech Registry

A flexible button component with variants, sizes, loading and disabled states.

Variants

Sizes

States

Icon-only

For buttons whose content is a single icon (glyph, <svg>, etc.) with no visible label, pass iconOnly and provide an aria-label for accessibility.

Props

Prop	Type	Default	Description
`variant`	`primary \| secondary \| ghost \| danger`	`primary`	Visual style
`size`	`sm \| md \| lg`	`md`	Button size
`loading`	`boolean`	`false`	Shows spinner, disables interaction
`iconOnly`	`boolean`	`false`	Square, padding-free layout for icon-only content — pair with `aria-label`
`disabled`	`boolean`	`false`	Disables the button
`children`	`ReactNode`	—	Button label
`className`	`string`	—	Additional class names

Compositions

Open all 9 →

Primary Button

Secondary Button

Ghost Button

Danger Button

Small Button

Large Button

Properties

`Button` props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Renders the button's props onto its single child element (via Radix `Slot`) instead of a `<button>`
`children`	`ReactNode`	—	Button label/content
`className`	`string`	—	Additional class names to merge with the component root element
`iconOnly`	`boolean`	`false`	Renders the button as a square icon-only control with no visible label spacing
`loading`	`boolean`	`false`	Shows a spinner and disables the button while an action is in flight
`size`	`"sm" \| "md" \| "lg"`	`md`	Controls the size; defaults to md
`variant`	`"primary" \| "secondary" \| "ghost" \| "danger"`	`primary`	Controls the color/style treatment; defaults to primary

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).