Button

Trigger actions with consistent styling inspired by Umbro's clean design patterns. Available in multiple variants and sizes with built-in loading states.

Variants

Snippet

import { Button } from '@creo-team/buzz-ui/client'

export default function Example() {
  return (
    <div className="flex gap-3">
      <Button variant="bold">Bold</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="subtle">Subtle</Button>
      <Button variant="text">Text</Button>
    </div>
  )
}

Sizes

Snippet

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

States

Snippet

<Button disabled>Disabled</Button>
<Button loading>Loading</Button>
<Button className="w-full">Full Width</Button>

With Icons

Icon Only Buttons

Snippet

<Button variant="bold">
  <PlusIcon className="mr-2 h-4 w-4" />
  Add Item
</Button>
<Button variant="text" size="sm">
  Download
  <DownloadIcon className="ml-2 h-4 w-4" />
</Button>

Selected State

Snippet

<Button variant="bold" selected>
  Selected Bold
</Button>
<Button variant="outline" selected>
  Selected Outline
</Button>

Toggle Button Group

Snippet

function ToggleButtonGroup() {
  const [selected, setSelected] = useState('grid')

  return (
    <div className="flex rounded-lg border border-[var(--c-border)] p-1">
      {options.map((option) => (
        <Button
          key={option.value}
          variant="subtle"
          size="sm"
          selected={selected === option.value}
          onClick={() => setSelected(option.value)}
          className="rounded-md"
        >
          {option.icon}
          {option.label}
        </Button>
      ))}
    </div>
  )
}

Interactive Examples

Snippet

<Button 
  variant="success" 
  onClick={() => alert('Success! 🎉')}
>
  Click Me
</Button>

API Reference

Prop	Type	Default	Description
`variant`	`'bold' \| 'outline' \| 'subtle' \| 'glass' \| 'ghost' \| 'icon' \| 'text' \| 'nav' \| 'success' \| 'danger'`	`'bold'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size preset for padding and text
`loading`	`boolean`	`false`	Shows spinner and disables button
`selected`	`boolean`	`false`	Selected state for toggle buttons
`iconOnly`	`boolean`	`false`	Renders button as circular icon-only button
`...props`	`HTMLMotionProps<'button'>`	—	All standard button attributes plus Framer Motion props

See the full API: /components/button/api