Skip to content
Nim UI

Button

The Button component is the primary interactive element for triggering actions in your application. It supports multiple variants, sizes, and states.

Import

import { Button } from '@nim-ui/components';

Variants

Buttons come in five different variants to suit various use cases.

Button Variants

View Code 
<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 size options are available: small, medium (default), and large.

Button Sizes

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

States

Disabled

Disabled State

View Code 
<Button disabled>Disabled Button</Button>
<Button variant="outline" disabled>Disabled Outline</Button>

Loading

Loading State

View Code 
<Button loading>Loading...</Button>
<Button variant="outline" loading>Please wait</Button>

Full Width

Full Width Button

View Code 
<Button fullWidth>Full Width Button</Button>

With Icons

Combine buttons with icons for enhanced visual communication.

Buttons with Icons

View Code 
<Button variant="primary">
  <ArrowRightIcon className="mr-2" />
  Next
</Button>
<Button variant="outline">
  <ArrowLeftIcon className="mr-2" />
  Back
</Button>
<Button variant="ghost">
  <RefreshIcon className="mr-2" />
  Refresh
</Button>

Props

Name Type Default Description
variant 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' 'primary' Visual style variant of the button
size 'sm' | 'md' | 'lg' 'md' Size of the button
disabled boolean false Whether the button is disabled
loading boolean false Show loading state and disable interaction
fullWidth boolean false Whether the button should take full width of container
type 'button' | 'submit' | 'reset' 'button' HTML button type attribute
onClick (event: MouseEvent) => void - Click event handler
className string - Additional CSS classes to apply
children * ReactNode - Button content

Usage Examples

Form Submit Button

function LoginForm() {
  const [loading, setLoading] = useState(false);


  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);


    try {
      await loginUser();
    } finally {
      setLoading(false);
    }
  };


  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <Button type="submit" loading={loading} fullWidth>
        Sign In
      </Button>
    </form>
  );
}

Confirmation Dialog

function DeleteConfirmation({ onConfirm, onCancel }) {
  return (
    <div className="flex gap-3">
      <Button variant="danger" onClick={onConfirm}>
        Delete
      </Button>
      <Button variant="outline" onClick={onCancel}>
        Cancel
      </Button>
    </div>
  );
}
function Navigation() {
  const navigate = useNavigate();


  return (
    <div className="flex gap-2">
      <Button variant="ghost" onClick={() => navigate('/')}>
        Home
      </Button>
      <Button variant="ghost" onClick={() => navigate('/about')}>
        About
      </Button>
      <Button variant="primary" onClick={() => navigate('/signup')}>
        Sign Up
      </Button>
    </div>
  );
}

Accessibility

The Button component follows WAI-ARIA best practices:

  • Uses semantic <button> element
  • Supports keyboard navigation (Enter, Space)
  • Properly handles disabled and aria-disabled states
  • Announces loading state to screen readers
  • Focus visible states for keyboard users

Keyboard Support

KeyAction
EnterActivates the button
SpaceActivates the button
TabMoves focus to next focusable element
Shift + TabMoves focus to previous focusable element

Best Practices

Do

  • Use primary variant for main actions
  • Use danger variant for destructive actions
  • Add loading states for async operations
  • Include descriptive labels
  • Use icons to enhance clarity

Don’t

  • Use multiple primary buttons in the same context
  • Make buttons too small for touch targets (minimum 44x44px)
  • Use buttons for navigation (use links instead)
  • Rely on color alone to convey meaning
  • Create overly long button labels

Customization

Custom Colors

<Button className="bg-purple-600 hover:bg-purple-700 text-white">
  Custom Color
</Button>

Custom Rounded Corners

<Button className="rounded-full">
  Rounded Button
</Button>

Custom Shadow

<Button className="shadow-lg hover:shadow-xl">
  Elevated Button
</Button>

Changelog

v0.0.0

  • Initial release with 5 variants
  • Added loading state
  • Added size variants
  • Full TypeScript support