DocsComponentsButton

Button

Primitive8 variants

A production-grade button with 8 variants, 8 sizes (including icon-only), loading states, left/right icons, full-width mode, active press scale, and full keyboard accessibility via Radix Slot.

#ff7b72">import { FqButton } from '@/components/harlowui/primitives/fq-button'
#ff7b72">export default function App() {
  #ff7b72">return (
    <#7ee787">FqButton variant="solid" size="md" onClick={() => console.log('clicked')}>
      Save Changes
    </#7ee787">FqButton>
  )
}

Variants

Eight semantic variants with hover, focus-visible ring, and active press scale transitions.

Sizes

Five text sizes from compact xs to spacious xl, plus three icon-only sizes.

Icon Sizes

icon-sm

icon

icon-lg

With Icons

Leading, trailing, or both icons for contextual actions.

Icon Buttons

Compact icon-only buttons across all variants.

Loading States

Click to simulate async operations. Spinner replaces the left icon and disables interaction.

Full Width

Disabled

Button Groups & Patterns

Toolbars, action bars, split buttons, and toggle actions -- the composition patterns that power real interfaces.

Toolbar

Action Bar

Split Button

Toggle Action

Real-World Patterns

Buttons in production contexts -- authentication flows and account settings.

Sign In

Account

API Reference

Prop	Type	Default	Description
`variant`	`"solid" \| "outline" \| "ghost" \| "subtle" \| "destructive" \| "success" \| "link" \| "secondary"`	`"solid"`	Visual style variant
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "icon" \| "icon-sm" \| "icon-lg"`	`"md"`	Button size
`loading`	`boolean`	`false`	Shows spinner and disables interaction
`leftIcon`	`ReactNode`	-	Icon rendered before children
`rightIcon`	`ReactNode`	-	Icon rendered after children
`fullWidth`	`boolean`	`false`	Stretches to full container width
`asChild`	`boolean`	`false`	Merge props onto child element via Radix Slot
`disabled`	`boolean`	`false`	Disables the button

PreviousSpacing NextBadge