Skip to Content
DocumentationComponentsButton

Button

버튼 컴포넌트 입니다.

Import

import { Button } from '@poodle-kit/ui'

Usage

Basic Button

<Button>Default Button</Button>

Variants

Buttons come in different visual styles to convey meaning:

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

Sizes

Three sizes available: small, medium (default), and large:

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

Disabled State

Disabled buttons are not interactive:

<Button disabled>Disabled Button</Button>

Full Width

Make the button span the full width of its container:

<Button className="w-full">Full Width Button</Button>

With Icons

Add icons to enhance button meaning:

<Button>
  <ArrowLeft /> Back
</Button>
<Button>
  Next <ArrowRight />
</Button>

Loading State

Show loading indicators during async operations:

<Button disabled>
  <Spinner /> Loading...
</Button>

API Reference

PropTypeDefaultDescription
variant'primary' | 'secondary' | 'outline' | 'ghost' | 'danger''primary'Visual style variant of the button
size'sm' | 'md' | 'lg''md'Size of the button
disabledbooleanfalseWhether the button is disabled
onClick(event: MouseEvent) => voidundefinedClick event handler
type'button' | 'submit' | 'reset''button'HTML button type attribute
classNamestringundefinedAdditional CSS classes

Examples

Form Submit Button

function LoginForm() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle login
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <Input type="email" placeholder="Email" />
      <Input type="password" placeholder="Password" />
      <Button type="submit" variant="primary">
        Sign In
      </Button>
    </form>
  )
}

Async Action

function AsyncButton() {
  const [loading, setLoading] = useState(false)
 
  const handleClick = async () => {
    setLoading(true)
    try {
      await fetchData()
    } finally {
      setLoading(false)
    }
  }
 
  return (
    <Button onClick={handleClick} disabled={loading}>
      {loading ? 'Loading...' : 'Load Data'}
    </Button>
  )
}

Button Group

function ButtonGroup() {
  return (
    <div className="flex gap-2">
      <Button variant="outline">Cancel</Button>
      <Button variant="primary">Save</Button>
    </div>
  )
}

Accessibility

  • Uses semantic <button> element
  • Keyboard accessible (Enter and Space keys)
  • Proper focus indicators
  • ARIA attributes for disabled state
  • Screen reader friendly labels

Best Practices

Do ✅

  • Use clear, action-oriented labels (“Save Changes” not “Submit”)
  • Use primary variant sparingly for main actions
  • Provide visual feedback on hover and active states
  • Consider button placement and grouping

Don’t ❌

  • Don’t use vague labels like “Click Here”
  • Don’t make buttons too small on mobile
  • Don’t use multiple primary buttons in the same view
  • Don’t disable buttons without explanation
  • Input - Form input fields
  • Card - Container component
  • Modal - Dialog component
OverviewInput